javascript - 谷歌浏览器中的图像宽度问题

Question

我正在编写一个简单的 jQuery 插件，它在屏幕中央显示具有特定类的图像(单击时，全尺寸)。我正在使用此 html 代码，其中显示我的图像:

<div id="source">
   <img src="" alt="" />
</div>

在“src”属性中，我放置全尺寸图像的路径，等待我用 jQuery 制作一些动画的 onload 事件:

$("#source img").load(function(){
var calcWidth = this.width + ...
}); 

但是在 Google Chrome 中(并且仅在 Google Chrome 中)当 onload 事件触发时，this.width 等于上一个图像的宽度。这意味着当我第一次将“src”设置为宽度为 800px 的“img/1.jpg”时，一切正常，但是当我尝试将“src”中的第二张图像“img/2.jpg”设置为 600px 宽度时， this.width 仍然返回 800px(在 onload 事件中!)。
如何解释这种行为？

更新:
我是这样设置src的:

function NavClick(){
        $("#source img").attr({
            src: $(this).attr("src")
        });
        currentImage = this.indx;
    }

“this”引用了缩略图，我使用相同的src作为缩略图和全尺寸图像仅用于测试，稍后我会将它们放在不同的目录中。
这段代码解决了我的问题，但我不明白为什么:

function NavClick(){
        $("#source img").attr({
            src: "#"
        });
        $("#source img").attr({
            src: $(this).attr("src")
        });
        currentImage = this.indx;
    }

在设置新的 src 之前，我将其设置为“#”，这可能是由于缓存图像，但只出现在谷歌浏览器中。

Answer 1

使用window load事件，image load事件上图片没有完全加载(见this问题)

我没有测试它，但这可能只是为了解决问题，让我知道它是否没有(或者是否有)

$(window).load(function(){    
    var calcWidth = $("#source img").width() + ...;
});