Question

目前我在一个页面上加载了3或4个画廊。这是一个摄影师网站，所以每个画廊有大约40个图像。我最初预先加载了图像，我只是加载前两个图像，以便页面快速加载，然后在后台使用JS循环循环并加载其余部分。它运作良好，除了它不遵守订单，顺序很重要。我已经看到了一些示例，其中您隐藏图像直到它们加载，但由于在页面中加载了大约120个大图像，它导致页面加载缓慢。有没有办法可以使用我的代码，并在加载后对图像进行排序？或者，如果我通过数组加载它们，它仍然会忽略加载顺序吗？这是我的jsfiddle：http://jsfiddle.net/drrobotnik/YKPEu/

我正在看的那块js主要是这部分：

var stack = [];
for (var i = 3; i <= 59; i++) {
        var img = new Image(782,521);
        img.src = 'http://anikalondon.com/Images/weddings/weddings-3-' + i + '.jpg';
        $(img).bind('load', function() {
            stack.push(this);
            var len = stack.length+2;
            $(".numbers").text(($(".enggal img:visible").index()+1)+"/"+len);
            if(i>=58){$(".numbers").css("visibility", "visible");}
        });
    }

再次，在这个例子中，它不按顺序加载图像（可能是首先加载的，不确定）。

Answer 1

如果它有帮助，那么这是一个很好的例子，但这里是一个排序算法，您可以在将它们插入DOM之前对其进行排序

stack.sort(function(a,b){
  return a.src.substring(a.src.lastIndexOf("-")+1,a.src.lastIndexOf(".")) - b.src.substring(b.src.lastIndexOf("-")+1,b.src.lastIndexOf("."))
})

Answer 2

如果你替换了你，那么如何简化并将其用于循环

for (var i = 3; i <= 59; i++) 
{ 
    $(".enggal").append("<img src='http://anikalondon.com/Images/weddings/weddings-3-" + i + ".jpg' />");       
}

按顺序插入所有图像。您可能需要添加宽度/高度属性。

Answer 3

在不知道如何使用stack的情况下，我不完全确定这会有效，但为什么不立即将索引信息保存到商店，而不是在回调时它已完成加载？

你还应该在绑定加载后设置src，否则它可能会错过。

[完全修改自原始答案]

var img,i,stack = []; 

var imageLoaded=function(e) {
    var len = stack.length+2,
        index = parseInt(this.src.split('-')[2])-3
    $(".numbers").text(($(".enggal img:visible").index()+1)+"/"+len);
    if(index>=58){$(".numbers").css("visibility", "visible");}
}

for (i = 3; i <= 59; i++) { 
        img = new Image(782,521);  
        $(img).bind('load', imageLoaded);
        stack.push(img);
}

// Just to make sure that the first image doesn't finish loading before the loop isdone
// throwing off the count in the imageLoaded function

for (i = 3; i <= 59; i++) { 
    stack[i-3].src = 'http://anikalondon.com/Images/weddings/weddings-3-' + i + '.jpg';
}

以js加载图像以便循环加载非顺序

3 个答案: