Javascript jquery替换span'；s与img'；s并检查img'；它满了

可能重复：

我的情况是，我有以下标记：

<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（）

，因为已知的图像和缓存等问题

我试过使用它，但它似乎不能满足我的需要

---

有没有其他方法可以做到这一点呢？

我不太确定，如果这是你想要实现的，但是你可以试试

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

$（“#按钮”）。单击（函数（）{
log（“已开始加载…”）；
//获取要替换的所有跨度，并对其进行计数
var imgSpans=$（“div.image span.slide”），
toLoad=imgSpans.length，
加载=0；
//现在加载每个图像
对于（var i=0；i

---

我不太确定，如果这是你想要实现的，但你可以尝试一下

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

$（“#按钮”）。单击（函数（）{
log（“已开始加载…”）；
//获取要替换的所有跨度，并对其进行计数
var imgSpans=$（“div.image span.slide”），
toLoad=imgSpans.length，
加载=0；
//现在加载每个图像
对于（var i=0；i

---

您可以选择图像的

高度

和

宽度

，它们在加载之前保持为0。如果是交叉的话，不要害怕browser@ocanal当前位置这正是我想做的。您的具体意思是什么？jQuery的load（）有什么问题#justCurious@undefined当前位置我认为这不是一个完全相同的副本。该解决方案中的场景仅适用于单个图像，而不是像这里这样的一组图像。您可以选择图像的

高度

和

宽度

，在加载之前保持为0。如果是交叉的话，不要害怕browser@ocanal当前位置这正是我想做的。您的具体意思是什么？jQuery的load（）有什么问题#justCurious@undefined当前位置我认为这不是一个完全相同的副本。该解决方案中的场景仅适用于单个图像，而不是像这里这样的一组图像。