Question

我在this示例之后使用（masonry + imagesLoaded + infinitescroll），一切正常，除了加载微调器，它在imagesLoaded完成之前隐藏，这是我的代码：

var $container = $('#masonry-grid');

// Masonry + ImagesLoaded
$container.imagesLoaded().progress(function(){
    $container.masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer'
    });
});

// Infinite Scroll
$container.infinitescroll({

        // selector for the paged navigation (it will be hidden)
        navSelector  : ".navigation",
        // selector for the NEXT link (to page 2)
        nextSelector : ".nav-next a",
        // selector for all items you'll retrieve
        itemSelector : ".grid-item",

        // finished message
        loading: {
            finishedMsg: '<span class="no-more-events"> No more events to load, <strong>Stay Tuned!</strong>  </span>',
            img: 'http://i.imgur.com/6RMhx.gif',
            msgText: "<em>Loading the next set of posts...</em>"
        },
        errorCallback: function() { $('#infscr-loading').animate({opacity: 0.8}, 15000).fadeOut('slow'); }
    },

    // Trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).hide();

        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.show();
            $container.masonry( 'appended', $newElems, true );
        });

});

问题是加载微调器在获取内容之后但在完成imagesLoaded（）之前显示，我隐藏了新加载的内容，直到加载了所有图像，如上一个回调函数function( newElements )中所示

如何在imagesLoaded（）函数完成之前显示加载微调器？

非常感谢任何帮助！

Answer 1

我通过隐藏#infscr-loading div并添加了一个新的div #loading-spin来显示加载微调器，在加载砌体时显示它并在imagesLoaded()完成后隐藏它来解决这个问题。

// Trigger Masonry as a callback
        function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).hide();
            $('#loading-spin').show();
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                $('#loading-spin').hide();
                // show elems now they're ready
                $newElems.show();
                RotateCardReset();  // Reset Rotating Cards
                $container.masonry( 'appended', $newElems, true );
            });
        });

Jquery - infinitescroll加载带有imagesLoaded插件的微调器

1 个答案: