jQuery图像预加载顺序

Question

我在一个方面就很难适应jQuery图像预加载脚本：我不知道如何确保以图像阵列的顺序加载/显示图像。

目前，每次我重新加载页面时，图像以不同的顺序显示。 （除图像顺序外，所有其他东西都可以正常工作。）

谁能帮我解决这个问题？

相关代码：

    (function($) {
        var imgList = [];
        $.extend({
            preload: function(imgArr, option) {
                var setting = $.extend({
                    init: function(loaded, total) {},
                    loaded: function(img, loaded, total, bild) {},
                    loaded_all: function(loaded, total) {}
                }, option);
                var total = imgArr.length;
                var loaded = 0;

                setting.init(0, total);
                for (var i = 0; i < total; i++) {
                    imgList[i] = ($("<img />")
                        .attr("src", imgArr[i])
                        .load(function() {
                            loaded++;
                            setting.loaded(this, loaded, total, this.src);
                            if(loaded == total) {
                                setting.loaded_all(loaded, total);
                            }
                        })
                    );
                }
           }
        });
    })(jQuery);

    $(document).ready(function() {
        $(function() {
            $.preload([
                "image1.jpg",
                "image2.jpg",
                "image3.jpg"
            ], {
                init: function(loaded, total) {
                    var z = 0;
                    while (z < total) {
                        z++;
                        $("section nav").append('<img id="e'+z+'" src="all/blank.png" alt=""/>');
                    }
                },
                loaded: function(img, loaded, total, bild) {
                    $("#e"+loaded).prop("src",bild);
                },
                loaded_all: function(loaded, total) {
                    //all done!
                }
            });
        });
    });

更新：

最后，我用一个完全不同的，更短的脚本（从头开始编写）解决了该问题。 它开始向我的图像容器中添加与占位符一样多（很小）的虚拟图像，因为该数组包含真实图像，并且仅在上一个图像完成后才加载每个图像：

imgs = new Array("number1.png","number2.png","number3.png");

for (i=0; i<imgs.length; i++) {
  $("section nav").append('<img id="e'+i+'" src="blank.png" alt=""/>');
}

fin(0);

function fin (n) {
  $('#e'+n).attr('onload', 'fin('+n+')');
  $("#e"+n).attr("src", imgs[n]).load( function() {
    fin ((n+1));
  });
}

Answer 1

问题是您将已加载的img附加到当前已加载的图像数量的位置，即，图像按其加载顺序放置。

您实际上希望在var i上订购它们：

for (var i = 0; i < total; i++) {
    imgList[i] = ($("<img />")
        .attr("src", imgArr[i])
        .load(function() {
            loaded++;
            setting.loaded(this, i, total, this.src);  // i instead of loaded
            if(loaded == total) {
                setting.loaded_all(loaded, total);
            }
        })
    );
}

但这是行不通的，因为加载图像时i将与total相同，因此所有图像都将移到total位置。 不是您想要的！

因此，我们需要将其包装在一个自调用匿名函数中，以访问正确的i值：

for (var i = 0; i < total; i++) {

    // wrap in function to get access to the right i

    (function(img) {
        imgList[img] = ($("<img />")
            .attr("src", imgArr[img])
            .load(function() {
                loaded++;
                setting.loaded(this, img, total, this.src);  // img instead of i
                if(loaded == total) {
                    setting.loaded_all(loaded, total);
                }
            })
        );
    })(i);
}

用这个替换您的for循环，它应该可以工作。

Answer 2

除非您将每个图像的下载延迟到完成前一个（这是一个坏主意），否则您无法保证将按什么顺序下载它们。

浏览器通常会并行下载多个图像，以优化吞吐量。 结合不可预期的下载速度和不同的文件大小，几乎可以以任何顺序完成文件。

如果您想要的是视觉效果，则必须单独解决。

Answer 3

由于图像是异步loaded因此永远不会按顺序调用已loaded回调。 但是，您应该更改loaded_all以改为传递原始数组。 这样，您的处理程序就可以按顺序处理图像。

if(loaded == total) {
    setting.loaded_all(imgArray);
}