在文檔中隱藏圖像準備就緒，在每個圖像中加載時淡入淡出

Question

我試圖編寫一個使用setInterval加載時在圖像中淡入淡出的Jquery腳本。

我目前的代碼不工作 - 「圖像加載」類不會被刪除。

所以有兩個問題：1）爲什麼代碼不工作，2）這是完成我想要做什麼的最好方法？有沒有更好的辦法？

(function($) { 

     var $props = $('#properties'), 
      $imgs = $props.find("img"); 

     $imgs.addClass('image-loading'); 

     (function updateImages() { 
      setTimeout(function() { 

       $imgs.each(function(){ 
        $me = $(this); 

        // If image is loaded, remove class 
        $me.load(function(){ 
         $me.removeClass('image-loading'); 
        }); 
       }); 

       // if all images are loaded, stop the loop 
       $imgs.load(function() { 
        return false; 
       }); 

       updateImages(); 
      }, 100); 
     })(); 

    })(jQuery); 

Answer 1

看起來像是部分實現。試試這個：

(function($) { 

    var $props = $('#properties'), 
     $imgs = $props.find("img"), 
     loadCounter = 0, // you init these, but never use them? 
     nImages = $imgs.length; 

    $imgs.addClass('image-loading'); 

    (function updateImages() { 
     setTimeout(function() { 
      $imgs.one("load", function() { 

       $(this).removeClass('image-loading'); 

      // to manually trigger onload if image is in cache 
      }).each(function() { 
       if (this.complete) { 
        $(this).trigger("load"); 
       } 
      }); 
      updateImages(); 
     }, 100); 
    })(); 

})(jQuery);​ 

Demo here.

Answer 2

我有一個插件，可以幫助您與此有關。包括jQuery preloadImages插件，然後試試這個代碼：

properties.preloadImages(function(){ 
    // this refers to the image that is done loading. 
    $(this).removeClass("image-loading"); 
})/*.done(function(){ 
    alert("All images are loaded!"); 
})*/; 

編輯澄清：
此代碼將取代(function updateImages(){...})()

Answer 3

我結束了使用以下jQuery插件：

https://github.com/farinspace/jquery.imgpreload

語法超級簡單：

 var $imgs = $('#properties').find("img"); 

     $imgs.imgpreload({ 
      each: function() { 
       $(this).removeClass('image-loading'); 
      } 
     }); 

它比我最初嘗試破解的代碼更輕，更直接。它完全符合我的要求。