jqueryの - imagesLoadedプラグイン

Question

とinfinitescrollロードスピナー私はthisたとえば、次の（石工+ 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)

loを見せる方法imagesLoaded（）関数が終了するまで、スピニングをしますか？

ご協力いただければ幸いです。

Answer 1

私は#infscr-loadingのdivを非表示にすることで、これを解決し、積載スピナーを示し石工のロード中にそれを表示してimagesLoaded()が完了した後、それを隠すために、新規のdiv #loading-spinを追加しました。

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