1

我在这个例子之后使用（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() 函数完成之前如何显示加载微调器？

任何帮助将非常感激！

4

1 回答 1

0

我通过隐藏#infscr-loadingdiv 解决了这个问题，并添加了一个新的 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 );
            });
        });
于 2017-07-25T09:40:26.340 回答