jQuery Masonry Problem

Hi There,

Im trying to get Masonry working properly on a friends site. It seams to be sorta working, but its setting the height of the container before the page loads properly… so everything gets squashed…

If i hit “refresh” in my browser - it stays, however if I put my cursor in the URL bar - and hit return, it rights itself ??? Go back and it “refresh” and its squashed again :frowning:

Im using Chrome & Safari to test right now…


It sounds like it’s because the script is running before the images have finished loading, which can break the layout. When you go to the address bar and hit return, the images are cached and so the layout works properly.

The fix is detailed in the Masonry Appendix docs.

Hmmm… Im trying using this:

// or with jQuery
var $container = $('#image-grid');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {

But im just ending up with a JS Error:

"Uncaught TypeError: Object [object Object] has no method ‘imagesLoaded’ "

It sounds like you don’t have the plugin loaded… you need to download a separate script from: http://desandro.github.io/imagesloaded/ and include it in your page.

Bingo, thats it ! Dang, didn’t realise it was separate ! Thanks heaps ! :slight_smile: