更改 src 时图像加载的 jquery 回调

Question

一旦加载了 json 文件，我就会更改 img src，这一切都工作正常。但我想确保图像已完全加载。我可以使用以下方法做到这一点:

     .one("load",function(){ 
                alert("image has load yay");
            });

但是在阅读了各种帖子之后，如果图像位于缓存中，并非所有浏览器都会触发负载。我似乎没有在浏览器中遇到导致此问题的问题。但我只在 Mac 上测试过 FF(6.0.2)、Chrome(13.0.7) 和 Safari(5.0.5)。现在我确信 IE 一定有问题，并且只是与 PC 相关。我正在运行最新版本的浏览器，因此这些浏览器中发生了一些变化，现在可以触发负载。或者我的另一个想法是我正在运行最新版本的 jquery (1.6.3) .load 已更改吗？

我希望这一切都与运行最新的 jquery 有关，但如果不是，并且这是一个较旧的浏览器问题，那么我需要进行修复。我在此网站上尝试了几种解决方案，例如: jQuery loading images with complete callback还有 .load api 页面上的一些评论: http://api.jquery.com/load-event/#comment-30211903

但我似乎无法让他们工作。第一个根本不起作用，第二个似乎与 .each() 一起失败。

这是我到目前为止的代码，似乎工作正常，但不能确定，因为可能是较旧的浏览器问题。

$.getJSON(jsonURL, function(json) {         
    $("a.imgZoom img").attr("src", json[imageID].largeImage).one("load",function(){ 
         alert("the image has loaded");
    //do something here
    });
$("a.imgZoom").attr("href", json[imageID].largeImage);
})  

预先感谢您的帮助。

B

Answer 1

根据我大约一年前所做的一些测试，我发现在将图像的 .src 从一个值更改为另一个值时没有可靠的方法来获取加载事件。因此，我不得不加载一张新图像，并在加载新图像时用新图像替换我拥有的图像。该代码已经在数百个网站(用于幻灯片放映)中成功运行了大约一年，所以我知道它是有效的。

如果在新图像上设置 .src 属性之前设置加载处理程序，您将可靠地获取加载事件。这是我今天早些时候编写的一些用于捕获加载事件的代码:jQuery: How to check when all images in an array are loaded? .

在设置 .src 之前附加事件处理程序的代码在我尝试过的现代浏览器中适用于我(我没有测试旧版浏览器):

    $("img").on("load", function() {
        // image loaded here
    }).attr("src", url);

您可以在这里看到它的工作原理:http://jsfiddle.net/jfriend00/hmP5M/你可以使用 jsFiddle 测试任何你想要的浏览器。只需单击图像即可加载新图像。它循环遍历三个不同的图像(每次设置 .src)，每次唯一地加载其中两个(从不从缓存中)，并从缓存中加载一个以测试这两种情况。每当调用 .load 处理程序时，它都会向屏幕输出一条消息，以便您可以查看它是否被调用。