Following this instructions about infinite scroll, I was able to hide the new content from pages 2, 3 , 4, etc until it finished loading and then animate. Now I would like to achieve these same effect but with the main content, what would be the first page. Any help? Code that I'm using:

<script>
    $(function(){
      var $container = $('#boxes');
      $container.imagesLoaded( function(){
        $container.isotope({
          itemSelector : '.box' 
        });
      });  
</script>

<script>
$('#boxes').isotope({ 
 // options
   itemSelector : '.box',
   layoutMode : 'masonry'
    masonry : {
          columnWidth : 325
        },
});
</script>

<script>
   $(function(){
             var $container = $('#boxes');
             $container.imagesLoaded(function(){
                 $container.isotope({
                     itemSelector: '.box'
                 });
             });
              $container.infinitescroll({
        navSelector  : '#navigation',   
        nextSelector : '#navigation a#next', 
        itemSelector : '.box',    

        loading: {
            finishedMsg: 'no more pages to load.',
            img: '.gif'
                 }
             },
             function(newElements){ 
                 var $newElems = jQuery( newElements ).hide()
                 console.log('Elements Retrieved:');
                 var $newElems = $(newElements);
                 $container.imagesLoaded(function(){
                     $newElems.fadeIn(); // fade in when ready
           $container.isotope('appended', $newElems, function(){console.log('Appended');});
                 });
             });
         });

  </script>

And here's the blog. Thanks in advance!

Following this instructions about infinite scroll, I was able to hide the new content from pages 2, 3 , 4, etc until it finished loading and then animate. Now I would like to achieve these same effect but with the main content, what would be the first page. Any help? Code that I'm using:

<script>
    $(function(){
      var $container = $('#boxes');
      $container.imagesLoaded( function(){
        $container.isotope({
          itemSelector : '.box' 
        });
      });  
</script>

<script>
$('#boxes').isotope({ 
 // options
   itemSelector : '.box',
   layoutMode : 'masonry'
    masonry : {
          columnWidth : 325
        },
});
</script>

<script>
   $(function(){
             var $container = $('#boxes');
             $container.imagesLoaded(function(){
                 $container.isotope({
                     itemSelector: '.box'
                 });
             });
              $container.infinitescroll({
        navSelector  : '#navigation',   
        nextSelector : '#navigation a#next', 
        itemSelector : '.box',    

        loading: {
            finishedMsg: 'no more pages to load.',
            img: 'http://i.imgur./qkKy8.gif'
                 }
             },
             function(newElements){ 
                 var $newElems = jQuery( newElements ).hide()
                 console.log('Elements Retrieved:');
                 var $newElems = $(newElements);
                 $container.imagesLoaded(function(){
                     $newElems.fadeIn(); // fade in when ready
           $container.isotope('appended', $newElems, function(){console.log('Appended');});
                 });
             });
         });

  </script>

And here's the blog. Thanks in advance!

• javascript
• jquery-isotope

• If you want to hide the initially loaded content, just hide() your container or set its opacity to 0% - until whatever user action you have in mind reveals it and the content. – Systembolaget Commented Oct 16, 2012 at 5:15
• @Systembolaget I've tried using <script> $(function(){ var $container = $('#boxes').hide(); $container.imagesLoaded(function(){ $container.fadeIn(); }); }); </script> But first it starts loading the content, then hide it and then fade in – Lautaro Commented Oct 16, 2012 at 17:06

2 Answers 2

What I meant was - in your CSS you put

#container {
    display: none;
}

to hide the #container by default, so it won't show initially; then, in your script, you just put

$container.show();

at the point where you want to show it; for example, when everything for the first page has loaded or whenever you want to .show() your #container for the 1st time. Simple example here.

Small disadvantage of the solution with hide() (i.e. display: none) is that this needs to happen before layout as Isotope does not lay out hidden elements, so you get to see the initial "mess" for a split second, which i find unpleasant. Nicer solution is setting visibility: hidden, then do the layout and then show it again with visibility: visible. This will also set the container border to the size for all the elements.