更改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加载带有完整回调的图像以及 .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在新图像上设置属性之前设置了加载处理程序,则可以可靠地获取加载事件.这是我今天早些时候为捕获load事件而编写的一些代码:jQuery:如何检查数组中的所有图像何时被加载？.

这个代码附加事件处理程序BEFORE .src在我尝试过的现代浏览器中为我设置的工作(我没有测试旧的浏览器):

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

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