Freemasonry events: call event after images Loaded and layoutComplete

Question

So here is what I am trying to do. I have a grid with a lot of images, so I use the imagesLoaded library along with the masonry.

Here is 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 is 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 hide the grid until all the images are loaded and the layout is complete and then disappears. For some reason, in my code above, it never ends up in a layoutComplete block.

If I moved this block beyond imagesLoaded, $ container.masonry will be undefined by this point.

Any ideas?

FIDDLE HERE

If you change the opacity of the grid to 1, you will see that everything turns out elegantly. Just trying to figure out how to get layoutComplete for the call to set the opacity to 1.

Answer 1

You do not need to use the layoutComplete event for masonry. Since you can just add your animation code to initialize the masonry.

When all images are loaded, the imageLoaded function will execute. Then you can create a masonry object and animate it immediately:

 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 are the jsfiddle that demonstrate that

Answer 2

 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, of course, ensures that your js code will only be executed after all the images have been loaded (displayed)

Hope this helps! :)

Answer 3

Have you ever tried this, 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();