jQuery 무한 스크롤/이미지로드가 두 번

Question

jQuery 무한 스크롤과 석조로 이미지 갤러리가 있습니다. 한 페이지에 20 개의 이미지를 표시합니다. 페이지 매김 보이는 같은 :

../gallery/toprated.php?start=20 (page2) 
../gallery/toprated.php?start=40 (page3) 

등

내가 모든 페이지에 대한 20 개 개의 이미지를로드하는 페이지 매김에 클릭하여 각 페이지를 엽니 다

.

<div id="navigation"> 
    <ul class="pager"> 
     <li id="navigation-next"><a href="../gallery/toprated.php?start=20">Next</a></li> 

    </ul> 

infinty/벽돌 코드 :

는

infity 스크롤의 "다음"HREF처럼 보이는

<script>   
    (function($){ 
     //set body width for IE8 
     if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { 
      var ieversion=new Number(RegExp.$1) 
      if (ieversion==8) { 
       $('body').css('max-width', $(window).width()); 
      } 
     } 

     var $masonry = $('#masonry'); 

     $('#navigation').css({'visibility':'hidden', 'height':'1px'}); 

     if ($(document).width() <= 480) { 
      $masonry.imagesLoaded(function(){ 
       $masonry.masonry({ 
        itemSelector : '.thumb', 
     bufferPx : 40, 
        isFitWidth: true 
       }).css('visibility', 'visible'); 
       $('#ajax-loader-masonry').hide(); 
      }); 
     } else { 
      $masonry.masonry({ 
       itemSelector : '.thumb', 
     bufferPx : 40, 
       isFitWidth: true 
      }).css('visibility', 'visible'); 
      $('#ajax-loader-masonry').hide(); 
     } 
    })(jQuery); 

    jQuery(document).ready(function($){ 
     var $masonry = $('#masonry'); 

     $masonry.infinitescroll({ 
      navSelector : '#navigation', 
      nextSelector : '#navigation #navigation-next a', 
      itemSelector : '.thumb', 
    bufferPx : 40, 
      loading: { 
       msgText: '', 
       finishedMsg: 'Alle Bilder geladen', 
       img: '/images/ajax-loader.gif', 
       finished: function() {}, 
      }, 
     }, function(newElements) { 
      var $newElems = $(newElements).css({opacity: 0}); 

      if ($(document).width() <= 480) {    
       $newElems.imagesLoaded(function(){ 
        $('#infscr-loading').fadeOut('normal'); 
        $newElems.animate({opacity: 1}); 
        $masonry.masonry('appended', $newElems, true); 
       }); 
      } else { 
       $('#infscr-loading').fadeOut('normal'); 
       $newElems.animate({opacity: 1}); 
       $masonry.masonry('appended', $newElems, true); 
      } 
     }); 

     $masonry.on('mouseenter', '.thumb-holder', function() { 
      $(this).children('.masonry-actionbar').show(); 
     }); 

     $masonry.on('mouseleave', '.thumb-holder', function() { 
      $(this).children('.masonry-actionbar').hide(); 
     }); 
    }); 
</script> 
    <script> 
    jQuery(document).ready(function($) { 
     var $scrolltotop = $("#scrolltotop"); 
     $scrolltotop.css('display', 'none'); 

     $(function() { 
      $(window).scroll(function() { 
       if ($(this).scrollTop() > 100) { 
        $scrolltotop.slideDown('fast'); 
       } else { 
        $scrolltotop.slideUp('fast'); 
       } 
      }); 

      $scrolltotop.click(function() { 
       $('body,html').animate({ 
        scrollTop: 0 
       }, 'fast'); 
       return false; 
      }); 
     }); 
    }); 
</script> 

당신은 아이디어가 있습니까 세드릭? 도와 줘서 고마워.

Answer 1

if-else 문에 imagesLoaded가 유일한 차이점을 포함하지 않는 이유가 확실하지 않습니다. 다음으로 교체하십시오.

 var $newElems = $(newElements).css({opacity: 0});      
     $newElems.imagesLoaded(function(){ 
     $('#infscr-loading').fadeOut('normal'); 
     $newElems.animate({opacity: 1}); 
     $masonry.masonry('appended', $newElems, true); 
     });