jQuery無限滾動/圖片加載兩次

Question

我有一個圖片庫與jQuery無限滾動和磚石。我在一頁上顯示20個圖像。分頁的樣子：

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

等

當我通過點擊它加載了20幅圖像的每一頁分頁打開每個頁面。

「下一步」 HREF爲infity滾動的樣子：

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

    </ul> 

的infinty /磚石代碼：

<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); 
     });