img 태그

Question

에 holder.js와 lazyload.js를 결합하는 방법이 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 이벤트를 제공하지 않기 때문에 게으른 로딩 이미지를 누락하는 것은 쉬운 일이 아니다. 사용자가 스크롤 할 때 게으른로드를 원할 경우 해당 스크롤 위치에서로드 된 것으로 알려진 이미지와 다른 등록 된 이미지 (즉, 자리 표시 자)를 페이드 인하도록 스크롤 스파이를 추가해야합니다.