0

My problem is jQuery Masonry arranges my 'bricks' right away and don't wait images to load in. Also I want images to be responsive so I cant define something like:

<img src="asas" height= "100px" width="100px" alt="asas">

The link for the live example is here.

Dave Clemmer
  • 3,741
  • 12
  • 49
  • 72
aegyed
  • 1,320
  • 3
  • 20
  • 39

1 Answers1

0

You can put your code within window on load handler, or use imagesLoaded plugin which has been written by masonry author.

$(window).load(function(){
    $('#wrapper').masonry({ ... });
});

or:

var $wrapper = $('#wrapper');
$wrapper.imagesLoaded({
   done: function() {
        $wrapper.masonry({ ... });
   }
})


#wrapper img {
    width: 100%;
    height: auto;
}
Ram
  • 143,282
  • 16
  • 168
  • 197
  • I'm interested to know if this works. From what I can see, until each image has loaded its ratio is not known so its height isn't yet defined so I would have thought the answer would be to wait until all images have loaded before applying the masonry. – Popnoodles Jan 05 '13 at 23:41
  • `load` event fires when all images are loaded, however, with masonry I prefer to use `imagesLoaded` plugin. `load` event is deprecated. – Ram Jan 05 '13 at 23:50
  • 2
    @RichardA. http://stackoverflow.com/questions/5182016/what-is-the-difference-between-window-load-and-document-ready – Ram Jan 05 '13 at 23:55
  • Thanks a lot, i thought document.ready is the same. also could you recommend me some jquery/javascript book? – aegyed Jan 06 '13 at 00:03