更改src时jQuery图像加载回调

Question

我改变img src一旦我加载了一个json文件，所有这些工作正常。但我想确保图像完全加载。我可以做用：

 .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); 
}) 

在此先感谢您的帮助。

乙

Answer 1

基于一些测试，我做了大约一年前，我发现没有可靠的方式从一个值到另一个改变图像的.src时获得加载事件。因此，我不得不求助于加载新图像，并在新图像加载时替换新图像。这段代码已经在几百个网站（它被幻灯片使用）中成功运行了大约一年，所以我知道它的工作原理。

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

此代码，重视的事件处理程序之前设置的.src在现代浏览器中，我试图在为我工作（我没有测试旧的浏览器）：

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

你可以看到它在这里工作：http://jsfiddle.net/jfriend00/hmP5M/，你可以使用该jsFiddle测试你想要的任何浏览器。只需点击图片即可加载新图片。它循环访问三个不同的映像（每次设置.src），每次都加载其中的两个（永远不会从缓存中），并从缓存中加载一个，以便测试这两种情况。只要调用.load处理程序，它就会向屏幕输出一个msg，以便您可以查看它是否被调用。