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