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

提前感谢您的帮助。

乙

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处理程序时，它都会向屏幕输出一条消息，以便您可以看到它是否被调用。

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

1 个答案: