Jat*_*tin 3 javascript jquery dom google-chrome width
我写了一些jQuery代码,其中我在屏幕上获取图像的宽度并将它们存储在变量中.然后我在控制台中记录了该变量以查看它的值.当页面第一次加载时,它显示正确的值,但是如果我按F5,它将显示0作为宽度.
这是HTML:
<body>
<img src="img1.jpg" alt="image">
<img src="img1.jpg" alt="image">
<script type="text/javascript" src="script.js"></script>
</body>
这是jQuery代码(script.js):
jQuery(document).ready(function($) {
var imgs = $('img');
var width = imgs[0].width;
console.log(width);
});
600第一次加载页面时会显示控制台,但是当我按下F5时会显示0.为什么会这样？
目前jQuery(document).ready(),无法保证图像已加载.必须加载图像才能获得宽度.图像以异步方式加载,可能在jQuery(document).ready()火灾后完成.
要知道,对于确保图像加载,你要么需要有一个onload处理程序的具体形象,你可以知道什么时候是专门装载了它,或者你只需要检查图像的宽度时,在页面中的所有图像都加载window.onload或在jQuery中$(window).load(fn).
最简单的方法是将代码更改为:
jQuery(window).load(function() {
var imgs = jQuery('img');
var width = imgs[0].width;
console.log(width);
});
就个人而言,我建议您使用jQuery .height()和.width()这样的方法:
jQuery(window).load(function() {
var imgs = jQuery('img');
var width = imgs.eq(0).width();
console.log(width);
});
你可以在这看到这个工作:http://jsfiddle.net/jfriend00/D4CyN/
| 归档时间： |
|
| 查看次数： |
1027 次 |
| 最近记录： |