Possible Duplicate:
jQuery check if image is loaded
我有以下标记的情况:
<div class="image">
<img class="" src="content-images/1.jpg">
<span class="slide" rel="content-images/2.jpg"></span>
<span class="slide" rel="content-images/3.jpg"></span>
<span class="slide" rel="content-images/4.jpg"></span>
</div>
现在在 CSS 中，div.image 的所有子项都是绝对定位的，因此它们相互堆叠。
我正在做的是，在某个触发器上，比方说当点击页面上其他地方的按钮时，将 span 更改为 img的 src 设置为每个跨度中的 rel。这些图像是高分辨率的大图像，因此可能需要一段时间才能完全加载。
使用 javascript/jQuery 我需要显示加载消息/指示器，从单击按钮到所有 span 被替换为 img 完成加载中。
由于图像和缓存等方面的已知问题，我无法使用 jQuery 的 .load()。
我尝试使用 imagesloaded但它似乎没有满足我的需要。
你能想到其他方法吗？
我不太确定，如果这是你想要实现的，但你可以试一试......
$("#button").click(function(){
console.log("Started loading...");
// Get all spans to replace, and count them
var imgSpans = $("div.image span.slide"),
toLoad = imgSpans.length,
loaded = 0;
// Now load each image
for (var i = 0; i < toLoad; ++i) {
// Closure to keep correct value of i
(function(i){
// Preload image
var img = new Image();
img.src = imgSpans.eq(i).attr("rel");
img.onload = function(){
// When loading has finished, replace span with img...
imgSpans.eq(i).replaceWith(img);
if (++loaded == toLoad) {
// ...and check if all images have been loaded by now
console.log("Finished loading...");
}
};
})(i);
}
});
DEMO (JSFiddle)