gpt4 book ai didi

javascript - 为什么在 chrome 中刷新页面时 width 的值设置为零?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:36:35 26 4
gpt4 key购买 nike

我写了一些 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com