jquery masonry images are overlapping until a page resize is done

Question

I\'ve found this template that demonstrates the issue I\'m having with jquery masonry and image layout. Take a look at this twitter bootstrap template page:

The very fi

Answer 1

Use imagesLoaded() to triggered masonry after all images are loaded. (imagesLoaded() is provided by the script http://github.com/desandro/imagesloaded.)

$('.gallery-masonry').imagesLoaded( function(){
  $('.gallery-masonry').masonry({
   itemSelector: '.item',
   isAnimated: true,
   isFitWidth: true
  });
});