Wait until jQuery waterfall / masonry has finished loading elements before showing the containing div

Question

i understand how to only show a div once the page has finished loading.

But cant get jQuery waterfall working correctly with this method.

So currently, jQuery waterfall orders some blog posts which are displayed as individual divs and each have an image as a 'thumbnail'. There are 16 of these divs displayed inside the container and each take up 1/16th of the space in a masonry grid.

However currently, when the page is loading, the divs are loaded as full width and then it seems like waterfall works to make them fit into the grid. This looks un professional in my eyes.

So the idea was, whilst the waterfall function is working its magic, simply display a loading icon and then once complete the div will be shown.

I have set the div as

display: none

And this is what is used for the jQuery waterfall:

$(window).load(function(){  
  $('#buildcontainer').waterfall({ 
    colMinWidth: 250, 
    defaultContainerWidth: 1000,
    autoresize: true
  });
  $("#buildcontainer").show();
});

In a sense, this works okay and the div is only shown once the page has finished loading.

However the actual waterfall grid function doesn't work now. The divs are simply loaded as they would be if i wasnt using waterfall.

Anyone have any ideas?

Answer 1

Sorted, simply has to fadeIn / show the containing div BEFORE waterfall was used on it!

Answer 2

The examples for waterfall suggest using document.ready:

$(document).ready(function(){  
  $('#buildcontainer').waterfall({ 
    colMinWidth: 250, 
    defaultContainerWidth: 1000,
    autoresize: true
  });
});