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

Question

我有一個包含jQuery無限滾動和砌體的圖片庫。 我在一頁上顯示20張圖像。 分頁看起來像：

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

等等

當我通過單擊分頁打開每個頁面時，它將為每個頁面加載20張圖像。

嬰兒滾動的“ next” href如下所示：

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

    </ul>

無限/砌體代碼：

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