imagesLoaded 메서드가 JQuery 석공 술 및 무한 스크롤과 작동하지 않습니다.

Question

저는 JQuery 석조물을 사용해 왔으며 이제는 무한 스크롤을 추가하고 있습니다. 거의 모든 석공 술 "벽돌"에 이미지가 있으며 무한 스크롤을 사용하기 전에 이미지가 잘로드되고 모든 것이 훌륭했습니다. 무한 한 스크롤을위한 javascript의 다음 부분을 추가하고 내부에 imagesLoaded 메서드를 추가했습니다. 그러나 새 브릭이 추가되면 맨 위에 모두 쌓여 있습니다. 제 가정은 무한 스크롤 콜백에 imagesLoaded 메서드를 제대로 추가하지 않고 있지만 내 오류를 찾을 수 없었습니다. 코드는 다음과 같습니다.

<script type="text/javascript"> 
    $(function(){ 
     var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.tile', 
      columnWidth : 240 
      }); 
     }); 


    var $container = $('#container'); 
    $container.infinitescroll({ 
     navSelector : ".flickr_pagination",    
         // selector for the paged navigation (it will be hidden) 
     nextSelector : "a.next_page",  
         // selector for the NEXT link (to page 2) 
     itemSelector : "div.tile"   
         // selector for all items you'll retrieve 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
     var $newElems = $(newElements); 

     $container.imagesLoaded(function() { 
      masonry('appended', $newElems); 
     }); 
     } 
    ); 
    }); 
</script> 

첫 번째 JQuery 석조 호출이 제대로 작동하고 터치되지 않았습니다. 두 번째 부분은 문제가있는 부분입니다. 도움을 주셔서 감사 드리며 더 많은 정보가 필요하면 알려주십시오.

Answer 1

여기에 문제는 내가 무한 스크롤 콜백 함수에 $ 컨테이너에 .imagesLoaded()를 호출하고 있었고, 난이 $ newElements에에 전화 했어야했다 대답

$(function(){ 

     var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.tile', 
      columnWidth : 240 
      }); 
     }); 

    $container.infinitescroll({ 
      navSelector : '.flickr_pagination', // selector for the paged navigation 
      nextSelector : 'a.next_page', // selector for the NEXT link (to page 2) 
      itemSelector : '.tile',  // selector for all items you'll retrieve 
      loading: { 
       finishedMsg: 'No more pages to load.', 
       img: 'http://i.imgur.com/6RMhx.gif' 
      } 
      }, 
      // trigger Masonry as a callback 
      function(newElements) { 
      // hide new items while they are loading 
      var $newElems = $(newElements).css({ opacity: 0 }); 
      // ensure that images load before adding to masonry layout 
      $newElems.imagesLoaded(function(){ 
       // show elems now they're ready 
       $newElems.animate({ opacity: 1 }); 
       $container.masonry('appended', $newElems, true); 
      }); 
      } 
     ); 
    }); 

입니다.