CODEWITHSUNDEEP
javascriptjquerymasonryimagesloaded
Corey
Corey

Reputation: 2563

Masonry Events: Call event after imagesLoaded and layoutComplete

So here's what I'm trying to do. I have a grid with a lot of images, so I'm using the imagesLoaded library along with masonry.

Here's my CSS:

.grid {
    opacity:0;
}

And HTML:

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <div class="item">image</div>
    <div class="item">image</div>
    <div class="item">image</div>
</div>

And here's my JS:

var $container = $('.grid');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
    $container.masonry({
        columnWidth: '.grid-sizer',
        itemSelector: '.item',
        gutter: '.gutter-sizer'
    });
    $container.masonry('on', 'layoutComplete', function(){
        console.log('got here');
        $container.animate({'opacity':1});
    });
});

My goal is to have the grid hidden until all images are load and the layout is complete, and then fade it in. For some reason in my code above, it's never getting into the on layoutComplete block.

If I move that block outside of imagesLoaded, $container.masonry is undefined that point.

Any ideas?

FIDDLE HERE

If you change the grid opacity to 1 you can see everything is getting laid out fine. Just trying to figure out how to get the layoutComplete to call to set the opacity to 1.

Upvotes: 6

Views: 2526

Answers (3)

kalkanbatuhan
kalkanbatuhan

Reputation: 178

have you ever try this one, I think this is your answer

var $container = $('.grid').masonry({
        columnWidth: 200,
        itemSelector: '.item',
        gutter: 10
    });
  $container.masonry( 'on', 'layoutComplete', function() {    
        $container.animate({'opacity':1});
    });
$container.masonry();

Upvotes: 0

Domain
Domain

Reputation: 11808

jQuery(document).ready(function($){

     var wdm_wait = function(){

            jQuery("body").find("img").each(function(i) {

                   if(!this.complete)
                   {
                       return false;
                   }

            });
                 // when code reaches here Its assured that all the images are loaded
      clearInterval(waiting);   
      console.log('got here');   
      var $container = $('.grid');

    // initialize Masonry after all images have loaded 
       $container.masonry({
             columnWidth: 100,
             itemSelector: '.item',
             gutter: 10
        });
   $container.animate({'opacity':1}); 
 }

           waiting =  setInterval(wdm_wait,100);


 });

This would certainly assure that your js code executes only after all the images have been loaded (rendered)

Hope this helps! :)

Upvotes: 0

muchwow
muchwow

Reputation: 735

You don't need to use the layoutComplete event on masonry. As you can just add your animation code under the masonry initialization .

When all images are loaded, the imageLoaded function will execute. You can then create the masonry object and animate right away like so: 

var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
  columnWidth: 200,
  itemSelector: '.item',
  gutter: 10
});
console.log('got here');
    $('.grid').animate({'opacity':1});
});

Here is a jsfiddle that demonstrate that

Upvotes: 1

Related Questions