jQuery-使用imagesLoaded插件无限滚动加载微调器

Question

我在此示例之后使用（砌体+ 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()完成后将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 );
            });
        });