Lazyload 내가 무한 스크롤과의 jQuery lazyload 플러그인에 대한 jscroll 플러그인을 사용하고 무한 스크롤

Question

작동하지 https://www.appelsiini.net/projects/lazyload

Lazyload :

$(function() { 
    $("img.lazy").lazyload({ 
     effect : "fadeIn", 
    }); 
}); 

무한 스크롤 :

$(function() { 
    $('ul.pagination').hide(); 
    $("img.lazy").lazyload(); 
    $('.scroll').jscroll({ 
     loadingHtml: '<div class="text-center"><img src="{{ URL::asset('frontend/img/loading.gif') }}" alt="Loading.." /> Loading..</div>', 
     autoTrigger: true, 
     nextSelector: '.pagination li.active + li a', 
     contentSelector: 'div.scroll', 
     callback: function() { 
      $('ul.pagination').remove(); 
     } 
    }); 
}); 

Proble m :

지연로드 플러그인은 페이지 끝까지 스크롤하고 새로운 페이지가 무한 스크롤로로드 될 때까지 잘 작동합니다. 새 페이지가로드되면 이미지가 표시되지 않습니다.

Answer 1

lazyload 플러그인이 무한 스크롤 플러그인에서 제공하는 새로운 요소에 액세스 할 수 없기 때문에 이것이라고 생각합니다.

그래서 lazyload를 초기화 한 무한 스크롤 플러그인의 콜백에서 새 이미지를 식별하는 데 도움이됩니다.

$(function() { 
    $('ul.pagination').hide(); 
    $("img.lazy").lazyload(); 
    $('.scroll').jscroll({ 
    loadingHtml: '<div class="text-center"><img src="{{ URL::asset('frontend/img/loading.gif') }}" alt="Loading.." /> Loading..</div>', 
    autoTrigger: true, 
    nextSelector: '.pagination li.active + li a', 
    contentSelector: 'div.scroll', 
    callback: function() { 
     $('ul.pagination').remove(); 
     $('img.lazy').lazyload({ 
      effect: "fade-in" 
     }) 
    } 
    }); 
});