更改src时图像加载时的jQuery回调 [英] jquery callback on image load when changing the src
问题描述
一旦我加载了json文件，我就更改了img src，所有这些工作正常.但我要确保图像已完全加载.我可以使用的方式:
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:
.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已更改?
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?
我希望这一切与运行最新的jquery有关，但是如果不这样做，并且这是一个较旧的浏览器问题，那么我需要进行修复.例如，我在此站点上尝试了几种解决方案: jQuery加载具有完整回调的图像 还有.load api页面上的一些评论: http://api.jquery.com/load-event/#comment-30211903
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 callback And also some of the comments on the .load api page : http://api.jquery.com/load-event/#comment-30211903
但是我似乎无法让他们工作.第一个完全无效，第二个似乎被.each()取代了.
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().
这是我到目前为止所拥有的代码，看起来似乎还可以，但是不确定旧版浏览器是否有问题.
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);
})
在此先感谢您的帮助.
B
推荐答案
基于我大约一年前所做的一些测试，当从一个值更改图像的.src时，我发现没有可靠的方法来获取加载事件到另一个.因此，我不得不求助于加载新图像，并在加载新图像时用新图像替换我拥有的图像.该代码已经在数百个网站(幻灯片使用)中成功运行了大约一年，所以我知道它可以工作.
Based on some testing I did about a year ago, I found no reliable way to get a load event when changing the .src of 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属性之前设置了加载处理程序，则将可靠地获得load事件.这是我今天早些时候写的一些捕获负载事件的代码:
If you set the load handler BEFORE you set the .src property 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之前，附加事件处理程序的这段代码对我尝试过的现代浏览器有效(我没有测试旧的浏览器):
This code that attaches the event handler BEFORE setting the .src works for me in the modern browsers I've tried it in (I didn't test older browsers):
$("img").on("load", function() {
// image loaded here
}).attr("src", url);
您可以在这里看到它的工作: http://jsfiddle.net/jfriend00/hmP5M/，然后您就可以使用该jsFiddle测试您想要的任何浏览器.只需单击该图像即可使其加载新图像.它循环遍历三个不同的映像(每次设置.src)，每次都唯一地加载其中两个(永远不会从缓存中加载)，并从缓存中唯一地加载它们，以便测试这两种情况.每当调用.load处理程序时，它将在屏幕上显示一条消息，以便您查看是否调用了它.
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.
这篇关于更改src时图像加载时的jQuery回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
