mansory + beginから画像を読み込む無限軌跡プリローダーアニメーション

Question

jquery masonry + infinite scrollを使用します。無限のスクロールライブラリを使用して、最初のスクロールではなく、開始時（ページを開くとき）のローダーイメージでプリロードの効果が得られます。

は、mansoryプラグインで置き換えられた画像の最初のセットのページを開く際にgifプリローダーとして役に立ちます。

すべてのアイデア？ありがとうございます。

$container.imagesLoaded(function(){ 

     $container.masonry({ 
      isAnimated: true, 
      itemSelector : '.box', 
      columnWidth:10 
     }); 

    }); 


    $container.infinitescroll({ 
      navSelector : '#page-nav', // selector for the paged navigation 
      nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
      itemSelector : '.box',  // selector for all items you'll retrieve 
      //animate:true, 

      // enable debug messaging (to console.log) 
      loading: { 
       finishedMsg: 'Pagine da caricare terminate.', 
       img: 'http://i.imgur.com/6RMhx.gif' 
       } 
       }, 
      // trigger Masonry as a callback 
      function(newElements) { 
       // hide new items while they are loading 
       var $newElems = $(newElements).css({ opacity: 0 }); 
       // ensure that images load before adding to masonry layout 
       $newElems.imagesLoaded(function(){ 
       // show elems now they're ready 
       $newElems.animate({ opacity: 1 }); 
       $container.append($newElems).masonry('appended', $newElems, true); 

       }); 
      } 
     ); 

Answer 1

あなたはCSSで目に見えるあなたの読み込みGIFを設定することができます。画像が読み込まれた後、ページから完全に隠すか削除することができます。 #loading divに適切なスタイルを設定することを忘れないでください。

<div id="loading">... loading content goes here ...</div> 

In jQuery Side;

$container.imagesLoaded(function(){ 

$('#loading').remove(); 

//masonry stuff goes here 

}