0

私はjquery石積み+無限スクロールを使用します。無限スクロールライブラリを使用して、最初のスクロールではなく、最初から（ページを開いたとき）ローダーイメージでプリロード効果を得ることができます。

別の方法として、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 ); 

              });
             }
          );
4

1 に答える 1

1

cssで読み込み中のgifを表示するように設定できます。画像が読み込まれた後、画像を非表示にしたり、ページから完全に削除したりできます。適切なスタイリング（たとえば、ポジショニング）を#loadingdivに設定することを忘れないでください。

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

jQuery側で;

$container.imagesLoaded( function(){

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

//masonry stuff goes here

}
于 2012-05-08T10:02:20.263 に答える