Search jQuery

jQuery Forum

Masonary Image load problem

in Using jQuery Plugins • 9 years ago

I load the masonary in my page. but loads only after All images Load. Images load Down Down. Once all Images loaded the masonry Works

my page is contained of 200+ images

please help me

$(window).load(function() {

$('#mainmason').masonry({

itemSelector: '.rows',

isFitWidth: true,

isResizable:true

});

Replies(3)

jakecigar

Re: Masonary Image load problem

9 years ago

$(window).load(function() {

waits for all images to load before running masonry.

http://masonry.desandro.com/docs/intro.html says to use

imagesLoaded plugin

If your content contains any images, you’ll want to ensure that Masonry is triggered after all the images your content has loaded. The included imagesLoaded plugin makes this easy.

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});