0

我使用 jquery masonry + 无限滚动。我会从一开始就使用加载器图像（当我打开页面时）而不是在第一次滚动时使用无限滚动库来获得预加载效果。

或者，可以在页面打开时使用 gif 预加载器，以便使用 mansory 插件显示第一组图像。

有任何想法吗？提前非常感谢。

  $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。加载图像后，您可以将其完全隐藏或从页面中删除。不要忘记为#loading div 设置正确的样式（例如定位）。

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

在 jQuery 端；

$container.imagesLoaded( function(){

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

//masonry stuff goes here

}
于 2012-05-08T10:02:20.263 回答