Question

可能重复：
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更改为{{1}在每个范围内将img设置为src的情况。图像是大型高分辨率图像，因此可能需要一段时间才能完全加载。

使用javascript / jQuery我需要显示一个加载消息/指示器，从点击按钮到所有rel被替换为span完成时负荷。

由于图像和缓存等已知问题，我无法使用jQuery＆＃39; {

我尝试使用imagesloaded，但它似乎没有做我需要的。

你能想到还有其他方法吗？

Answer 1

我不太确定，如果这是你想要达到的目的，但你可以尝试一下......

$("#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)

jquery用img替换span，并检查img是否已加载

1 个答案: