我写了一些 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/
关于javascript - 为什么在 chrome 中刷新页面时 width 的值设置为零？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9688080/