웨이 포인트 빠른 스크롤로 벽돌 문제가있는 무한 스크롤

Question

아래의 코드를 사용하여 무한 스크롤이 작동하지만 아래로 빨리 스크롤 한 다음 새로운 내용이로드되지 않으면 다시 스크롤하지 않으면됩니다.

천천히 스크롤하면 정상적으로 작동합니다.

저는 대부분의 웨이 포인트 무한 스크롤 바로 가기에 기본값을 사용하고 있으며 데이터는 "추가"링크를 통해 PHP에서로드됩니다. php 파일은 각 호출마다 12 개의 항목을 표시하고 [더 이상 데이터가없는 경우] 새로운 "추가"링크가 표시됩니다.

<script> 
$(document).ready(function() { 

var container = $('.infinite-container'); 

// initialize Masonry after all images have loaded 
container.imagesLoaded(function() { 
    container.masonry({ 
     itemSelector: '.infinite-item', 
     transitionDuration: 0 
    }); 
}); 

    $('.infinite-container').waypoint('infinite', { 

    onAfterPageLoad: function() { 
     $(container).masonry('reloadItems'); 
     $(container).imagesLoaded(function() { 
      $(container).masonry('layout'); 
      }); 
    } 
}); 

}); 
</script> 

Answer 1

하지 정말 경유지 문제에 대한 해결책, 그것은 이 솔루션된다.

무한 스크롤 플러그인을 사용하도록 전환되었으며 현재 작동합니다. 기존 코드에 약간의 변화가 필요 https://github.com/paulirish/infinite-scroll

는, 현재의 웨이 포인트 페이지 탐색 사업부에서 "추가"링크를 감싸

여기에 새로운 코드는 경우에 다른 사람을 도움입니다.

$(document).ready(function() { 

    var $container = $('.infinite-container'); 
    // initialize Masonry after all images have loaded 
    $container.imagesLoaded(function() { 
     $container.masonry({ 
      itemSelector: '.infinite-item', 
      transitionDuration: 0, 
      "isFitWidth": true 
      //columnWidth: 200 
     }); 
    }); 

    $container.infinitescroll({ 
     navSelector : '#page-nav', // selector for the paged navigation 
     nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '.infinite-item',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pages to load.', 
      msgText: '<em>loading...</em>', 
      img: 'images/loading.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); 
     }); 
     } 
    ); 

});