Mostafa Attia Mostafa Attia - 3 years ago 155
jQuery Question

Jquery - infinitescroll loading spinner with imagesLoaded plugin

I'm using (masonry + imagesLoaded + infinitescroll) following this example, everything works fine except the loading spinner, it is hidden before imagesLoaded completed, here is my code:

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 );
});

});


the problem is that the loading spinner shows after the content is fetched but before the imagesLoaded() is done, I hide the newly loaded content until all images are loaded, as it shown in the last callback function
function( newElements )


How to show the loading spinner until imagesLoaded() function is done?

Any help would be much appreciated!

Answer Source

I solved this by hiding #infscr-loading div and added a new div #loading-spin to show the loading spinner, show it while masonry is loading and hide it after imagesLoaded() is completed.

// 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 );
            });
        });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download