JQuery - infinitescroll Laden Spinner mit imagesLoaded Plugin

Question

Ich verwende (Mauerwerk + imagesLoaded + infinitescroll) nach this Beispiel funktioniert alles einwandfrei mit Ausnahme der Lade Spinner, es versteckt ist, bevor imagesLoaded abgeschlossen, hier ist mein 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); 
     }); 

}); 

das Problem ist, dass die Lade spinner zeigen, nachdem der Inhalt abgerufen wird, aber bevor der imagesLoaded() durchgeführt wird, I ausblenden den neu geladenen Inhalt, bis alle Bilder geladen werden, wie es

in der letzten Rückruffunktion function(newElements) gezeigten Wie man den lo zeigt adding Spinner, bis die imagesLoaded() Funktion fertig ist?

Jede Hilfe wäre sehr willkommen!

Answer 1

Ich löste dies durch #infscr-loading div versteckt und einen neuen div #loading-spin hinzugefügt, um die Lade Spinner zu zeigen, zeigen sie, während Mauerwerk wird geladen und es verstecken nach imagesLoaded() abgeschlossen ist.

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