Question

我有一个带有jQuery无限滚动和砌体的图库。我在一页上显示20张图像。分页看起来像：

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

等

当我通过点击分页打开每个页面时，它会为每个页面加载20个图像。

infity滚动的“next”href如下所示：

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

    </ul>

infinty / masonry代码：

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

jQuery无限滚动/图像加载两次

1 个答案: