Jquery - 带有 imagesLoaded 插件的无限滚动加载微调器答案

【问题标题】：Jquery - infinitescroll loading spinner with imagesLoaded pluginJquery - 带有 imagesLoaded 插件的无限滚动加载微调器
【发布时间】：2017-12-21 04:00:31
【问题描述】：

我在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() 函数完成之前如何显示加载微调器？

任何帮助将不胜感激！

【问题讨论】：

标签： jquery infinite-scroll jquery-masonry imagesloaded

【解决方案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 );
            });
        });

【讨论】：