jQuery图像预加载顺序

我遇到了麻烦，在一个方面适应jQuery图像预加载脚本：我无法弄清楚如何确保我的图像按照我的图像数组的顺序加载/显示。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)); 
    }); 
}

来源

2012-06-05 Onsemeliot

问题是您将加载的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循环与这一个，它应该工作。

来源

2012-06-05 17:02:25 floorish

除非你延迟每个图像的下载直到完成之前（这将是一个坏主意），你不能保证他们将以什么顺序下载。

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

如果是你想要的视觉效果，你必须分开解决。

来源

2012-06-05 16:55:40 geon

您的loaded回调将永远不会按顺序调用，因为图像异步加载。但是，您应该更改loaded_all以代替传递原始数组。这样你的处理程序可以按顺序处理图像。

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

来源

2012-06-05 17:00:31

jQuery图像预加载顺序

回答

相关问题