jQuery 加载带有完整回调的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2392410/
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 loading images with complete callback
提问by FFish
I saw a comment on Ben Nadel's blogwhere Stephen Rushing posted a loader, but I can't figure out how I can pass the selectors and parameter.. I think I also need a completeCallback & errorCallback functions?
我在 Ben Nadel 的博客上看到了一条评论，Stephen Rushing 发布了一个加载器，但我不知道如何传递选择器和参数。我想我还需要一个 completeCallback 和 errorCallback 函数？
function imgLoad(img, completeCallback, errorCallback) {
if (img != null && completeCallback != null) {
var loadWatch = setInterval(watch, 500);
function watch() {
if (img.complete) {
clearInterval(loadWatch);
completeCallback(img);
}
}
} else {
if (typeof errorCallback == "function") errorCallback();
}
}
// then call this from anywhere
imgLoad($("img.selector")[0], function(img) {
$(img).fadeIn();
});
HTML:
HTML：
<a href="#" class="tnClick" ><img id="myImage" src="images/001.jpg" /></a>
JS:
JS：
$(document).ready(function() {
var newImage = "images/002.jpg";
$("#myImage").css("display","none");
$("a.tnClick").click(function() {
// imgLoad here
});
})
回答by Nick Craver
If you want it to load before showing, you can trim that down a lot, like this:
如果您希望它在显示之前加载，您可以将其减少很多，如下所示：
$(document).ready(function() {
var newImage = "images/002.jpg"; //Image name
$("a.tnClick").click(function() {
$("#myImage").hide() //Hide it
.one('load', function() { //Set something to run when it finishes loading
$(this).fadeIn(); //Fade it in when loaded
})
.attr('src', newImage) //Set the source so it begins fetching
.each(function() {
//Cache fix for browsers that don't trigger .load()
if(this.complete) $(this).trigger('load');
});
});
});
The .one()call makes sure .load() only fires once, so no duplicate fade-ins. The .each()at the end is because some browsers don't fire the loadevent for images fetched from cache, this is what the polling in the example you posted is trying to do as well.
该.one()呼叫确保.load（）只触发一次，所以没有重复的淡入。将.each()在年底是因为一些浏览器不火的load事件图像从缓存中提取，这是在您发布的例子轮询正在试图做的一样好。
回答by mario-mesiti
You need to be careful when using the load event for images since if the image is found in the browser's cache IE and (I am told) Chrome will not fire the event as expected.
对图像使用加载事件时需要小心，因为如果在浏览器的缓存 IE 中找到图像并且（我被告知）Chrome 将不会按预期触发该事件。
Since I had to face this problem myself, I solved by checking the DOM attribute complete (said to be working in most major browsers): if equals to true I just unbinded the previously bound 'load' event. See example:
由于我不得不自己面对这个问题，我通过检查 DOM 属性 complete 来解决（据说在大多数主要浏览器中都可以使用）：如果等于 true 我只是解除了之前绑定的 'load' 事件的绑定。见示例：
$("#myimage").attr("src","http://www.mysite.com/myimage.jpg").load(doSomething);
if ($("#myimage").get(0).complete) {
// already in cache?
$("#myimage").unbind("load");
doSomething();
}
Hope this helps
希望这可以帮助
回答by jamescharlesworth
I wanted this functionality and definitely did not want to have to load all the images when the page renders. My images are on Amazon s3 and with a big photogallery, that would be a lot of unnecessary requests. I created a quick jQuery plugin to handle it here:
我想要这个功能，绝对不想在页面呈现时加载所有图像。我的图片在 Amazon s3 上并且有一个很大的相册，这将是很多不必要的请求。我创建了一个快速的jQuery插件来处理它在这里：
$("#image-1").loadImage('/path/to/new/image.jpg',function(){
$(this).css({height:'120px'});//alter the css styling after the image has loaded
});
So basically, whenever a user clicks on a thumbnail that represents a set of pictures, I load the other images at that point in time. The callback allows me to change the css after the image has loaded.
所以基本上，每当用户单击代表一组图片的缩略图时，我都会在那个时间点加载其他图像。回调允许我在图像加载后更改 css。
回答by Jay
Try this one?
试试这个？
doShow = function() {
if ($('#img_id').attr('complete')) {
alert('Image is loaded!');
} else {
window.setTimeout('doShow()', 100);
}
};
$('#img_id').attr('src', 'image.jpg');
doShow();
Seems like the above works everywhere...
似乎上面的方法无处不在......
