Question

I use jquery masonry + infinite scroll. I would have the preloading effect with the loader image from the begin (when I open the page), not on 1st scroll, using the infinite scroll library.

in alternative can be usefull a gif preloader in the opening of the page for first set of images displaied with mansory plugin.

Any Ideas? thanks a lot in advance.

  $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

You can set visible your loading gif by css. After images were loaded you may hide or remove it completely from page. Don’t forget to set proper styling(for ex. positioning) to #loading div.

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

In jQuery Side;

$container.imagesLoaded( function(){

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

//masonry stuff goes here

}