網站加載程序進度條圖像使用Javascript和Jquery

Question

所以，我試圖做一個網站預加載器，而不是使用整個網站的$（窗口）.load函數，我想針對特定元素的ID和類。

我能夠做這樣的事：

var ImgArray = ["#img1","#img2","#img3"]; 

      for(var i = 0 ; i < ImgArray.length; i++) { 
       var name = ImgArray[i]; 

       $(name).load(function() { 


        //var nameNew = name;// name is a string, passed by Reference 

        alert(name); 

        //$(this).show(); 

       }); 
      } 

$('.loader').fadeOut(); 

我淡出程序的時候，所有的三個圖像在的「for循環」結束加載即。但是這個代碼仍然不能正常工作。在加載所有三個圖像之前，加載程序正在消失。 如果我試圖提醒名稱的值，它總是顯示＃img3，我不知道爲什麼？ 請幫我用我的代碼，以及如何在數組中的所有圖像加載時在循環結束時淡化加載器。 ？

Answer 1

您的淡入淡出發生在所有圖像加載之前的原因是因爲.fadeOut()發生在所有​​回調完成之前。你還使用哪個版本的jQuery？​​爲onload -event已在版本1.8中棄用。您應該改用.on('load', handler)。

我會用Promises來編碼。結帳https://github.com/kriskowal/q和https://github.com/gre/qimage

，代碼會看起來像

Q.all([Qimage(img1Url),Qimage(img2Url),Qimage(img3Url)]).spread(function(img1,img2,img3){ 
    $('#imageContainer').append(img1); 
    $('#imageContainer').append(img2); 
    $('#imageContainer').append(img3); 
    $('.loader').fadeOut(); 
},function(error){ 
    console.error(error); 
});