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