jquery - 逐步加载和附加图像

Question

我有一个无法解决的问题。我做了一个简单的 jQuery 专辑库，我有这个功能:

function loadAlbum (index) {
    for (var j=1; j < xmlData[index].length; j++) {

        var img = new Image();

        $(img).load(function() {
                    $(this).hide();
                    $('#album'+index+' .photoContainer').append(this);
                    $(this).fadeIn();
                })
                .error(function(){
                    //alert("Could not load one or more photo!");
                })
                .attr({
                    'src': xmlData[index][j],
                    'id': 'img'+index+j,
                    'class': 'photoFrame',
                    'width': newW,
                    'height': newH
                })
                .css({
                    'width': newW,
                    'height': newH
                });
    };
};

现在，正如您所看到的，所有图像 src 都是从包含数据的外部 XML 文件导入的(图像名称是渐进式的，例如:photo001.jpg、photo002.jpg 等)。

它们是通过 for 循环在 DOM 中创建的，并附加到 div 中。

您可能会说什么问题？我需要按照 XML 数据上指定的渐进方式附加所有图像，但这仅发生在本地计算机上，如果上传到某些服务器上则不会发生。我发现这是由于每个图像的加载时间不同，具体取决于大小......但我仍然不知道如何解决这个问题。有人知道吗？

Answer 1

以下尝试一次加载一张图像。加载图像后，将加载该集中的下一个图像。

function loadAlbum(index) {
    var i = 0;
    var j = xmlData[index].length;
    function loadImage() {
         if (i >= j) return;

         // do what you're doing in the loop except for ....
         $(img).load(function() {
             $(this).hide();      
             $('#album'+index+' .photoContainer').append(this);
             $(this).fadeIn();
             // increments i by 1 and calls loadImage for the next image.
             i++;
             loadImage();
         // etc.
    }
    loadImage();
}

我将其作为练习，让您确定如何一次加载多个图像并仍然保持顺序:)