jQuery的 - 用imagesLoaded插件infinitescroll裝載微調

Question

我使用（石工+ imagesLoaded + infinitescroll）以下this例如，一切工作正常，除了裝載微調，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)

如何顯示lo ading微調，直到imageLoaded（）函數完成？

任何幫助將不勝感激！

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