Question

我写了一些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。为什么会这样？

Answer 1

在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/

Answer 2

如果你知道图像尺寸，请将它们放在标记中：

<img src="img1.jpg" width="600" height="…">

然后你永远不会得到0宽度。：d

当页面在chrome中刷新时，为什么width的值被设置为零？

2 个答案: