更改 src 时图像加载的 jquery 回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7438990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery callback on image load when changing the src
提问by Ben
I'm changing the img src once i've loaded a json file, all this works fine. But I want to make sure the image is completely loaded. Which I can do using:
加载 json 文件后，我正在更改 img src，所有这些都可以正常工作。但我想确保图像已完全加载。我可以使用：
.one("load",function(){
alert("image has load yay");
});
But after reading various posts that not all browsers fire the load if the image is in cache. I don't seem to be getting this problem in the browser that are meant to cause this issue. But i've only test FF(6.0.2), Chrome(13.0.7) and Safari(5.0.5) on a mac. Now i'm sure IE must have a problem and is it only PC related. I'm running pretty recent versions of the browsers so has something changed in these to now fire load. Or my other thought is i'm running the latest version of jquery (1.6.3) has .load been changed?
但是在阅读了各种帖子后，如果图像在缓存中，并非所有浏览器都会触发负载。我似乎没有在浏览器中遇到导致此问题的问题。但我只在 Mac 上测试过 FF(6.0.2)、Chrome(13.0.7) 和 Safari(5.0.5)。现在我确定 IE 一定有问题，它是否只与 PC 相关。我正在运行相当新版本的浏览器，因此这些浏览器中的某些内容发生了变化，现在可以触发加载。或者我的另一个想法是我正在运行最新版本的 jquery (1.6.3) .load 是否已更改？
I'm hoping it's all to do with running the latest jquery, but if not and it's an older browser issue then I need to put in a fix. I've tried a couple of solution on this site for example: jQuery loading images with complete callbackAnd also some of the comments on the .load api page : http://api.jquery.com/load-event/#comment-30211903
我希望这一切都与运行最新的 jquery 有关，但如果不是，并且这是一个较旧的浏览器问题，那么我需要进行修复。我已经在这个网站上尝试了几个解决方案，例如： jQuery loading images with complete callback还有一些关于 .load api 页面的评论：http: //api.jquery.com/load-event/#comment- 30211903
But I can't seem to get them to work. The first one doesn't work at all and the second one seems to fall over with the .each().
但我似乎无法让他们工作。第一个根本不起作用，第二个似乎与 .each() 失败了。
This is the code i have so far which seems to work ok, but can't be sure as maybe an older browser issues.
这是我到目前为止的代码，它似乎可以正常工作，但不能确定，因为可能是旧浏览器问题。
$.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);
})
Thanks in advance for any help.
在此先感谢您的帮助。
B
乙
回答by jfriend00
Based on some testing I did about a year ago, I found no reliable way to get a load event when changing the .srcof an image from one value to another. As such, I had to resort to loading a new image and replacing the one I had with the new one when the new image was loaded. That code has been running successfully in several hundred web sites (it's used by a slideshow) for about a year now so I know it works.
根据我大约一年前所做的一些测试，我没有发现在将.src图像的值从一个值更改为另一个值时获取加载事件的可靠方法。因此，我不得不求助于加载新图像并在加载新图像时用新图像替换我拥有的图像。该代码已经在数百个网站（它被幻灯片使用）成功运行了大约一年，所以我知道它可以工作。
If you set the load handler BEFORE you set the .srcproperty on a new image, you will reliably get the load event. Here's some code I wrote just earlier today for capturing the load event: jQuery: How to check when all images in an array are loaded?.
如果.src在新图像上设置属性之前设置加载处理程序，您将可靠地获得加载事件。这是我今天早些时候为捕获加载事件而编写的一些代码：jQuery：如何检查数组中的所有图像何时加载？.
This code that attaches the event handler BEFORE setting the .srcworks for me in the modern browsers I've tried it in (I didn't test older browsers):
这段代码.src在我尝试过的现代浏览器中为我设置工作之前附加了事件处理程序（我没有测试旧浏览器）：
$("img").on("load", function() {
// image loaded here
}).attr("src", url);
You can see it work here: http://jsfiddle.net/jfriend00/hmP5M/and you can test any browsers you want using that jsFiddle. Just click on the image to cause it to load a new image. It cycles through three different images (setting .src each time), loading two of them uniquely every time (never from the cache) and one from the cache in order to test both cases. It outputs a message to the screen whenever the .load handler is called so you can see if it's called.
您可以在这里看到它的工作原理：http: //jsfiddle.net/jfriend00/hmP5M/，您可以使用该 jsFiddle 测试您想要的任何浏览器。只需单击图像即可使其加载新图像。它循环遍历三个不同的图像（每次设置 .src），每次都唯一地加载其中两个（从不从缓存中）和一个从缓存中加载，以测试这两种情况。每当调用 .load 处理程序时，它都会向屏幕输出一条消息，以便您可以查看它是否被调用。
