如何結合img標籤上的holder.js和lazyload.js

Question

根據此link，lazyload現在符合holder.js腳本。

這裏是jsFiddle。我期待第三張圖像像其他圖像一樣消失。但我無法讓它工作。

有人可以告訴我我做錯了什麼？

在此先感謝。

HTML：

<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" alt="BMW M1 Hood"> 
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_side.jpg" alt="BMW M1 Side"> 
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/does-not-exist" alt="Viper 1"> 
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/viper_corner.jpg" alt="Viper Corner"> 
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m3_gt.jpg" alt="BMW M3 GT"> 
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/corvette_pitstop.jpg" alt="Corvette Pitstop"> 

JS：

$(function() { 
    $("img").lazyload({ 
     effect: "fadeIn", 
     effectspeed: 2000, 
     skip_invisible: false 
    }); 
}); 

Answer 1

之所以 「失蹤」 佔位符不褪色是因爲lazyLoad的load事件永遠不會在它觸發（其形象不存在）。你需要指定您希望多少圖像手動加載和褪色他們：http://jsfiddle.net/zBuJV/2/

$(function() { 
    var expectedImages = 5; 
    var loadExpected = (function (totalImages, finishCallback) { 
     var total = totalImages; 
     var loaded = 0; 
     return function() { 
      loaded++; 
      if (loaded >= total) { 
       finishCallback(); 
      } 
     } 
    })(expectedImages, function() { 
     $("img").fadeIn(2000); 
    }); 

    $("img").lazyload({ 
     effect: "hide", 
     effectspeed: 0, 
     skip_invisible: false, 
     load: function() { 
      loadExpected(); 
     } 
    }); 
}); 

lazyLoad不提供error事件，所以懶加載圖像丟失是不容易的。如果您想在用戶滾動時進行延遲加載，則需要添加滾動間諜以淡入已知在該滾動位置加載的圖像以及任何其他註冊圖像（即佔位符）。