使用Javascript和Jquery的Website Loader進度欄圖像

Question

因此，我試圖制作一個網站預加載器，而不是使用整個網站的$（window）.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循環”的末尾，我正在使加載程序褪色。 但是，此代碼仍然無法正常運行。 在加載所有三個圖像之前，加載程序正在逐漸消失。 如果我嘗試提醒name的值，它始終顯示＃img3，我不知道為什么？ 請幫我提供我的代碼，以及在加載數組中的所有圖像時如何在循環結束時使加載器褪色。 ？

Answer 1

淡入淡出發生在加載所有圖像之前的原因是因為.fadeOut()發生在所有.load()回調完成之前。 您還在使用哪個版本的jQuery？ 版本1.8中已棄用onload -event的.load .load() 。 您應該改用.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);
});