Jquery

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 - 带有 imagesLoaded 插件的无限滚动加载微调器

Jquery - infinitescroll loading spinner with imagesLoaded plugin

infinite-scroll

jquery-masonry

imagesloaded