Isotope items overlap on initial load

Question

Using a masonry layout for this site and upon the first load each box overlaps. If you use any of the navigational items to sort or even just stay on "all" they rearrange themselves. Any ideas?

Answer 1

I don't have a reputation of 50 yet so I can't comment, but I wanted to share a couple tips that I stumbled upon in the past as I've used this plugin a lot, and it could help other people.

First off, I definitely use the imageLoaded function as Sarah mentioned, and not the onload. (https://github.com/desandro/imagesloaded)

Tip 1 - To speed up the isotope plugin getting to work (useful if image sizes are big, or you have a lot of them), you load a placeholder image for each container, then after the imagesloaded plugin fires, you can have the isotope plugin get to work quickly. Then you can swap the real image in with a data- attribute that contains the real src url, just do so using the isotope callback (http://isotope.metafizzy.co/events.html). The only caveot is your images would need to have the same dimensions as the placeholder or the sizing of the containers could get messed up and overlap again.

Tip 2 - I never actually did this, but one method I was thinking of using was to load the images as a background image of the container, set a height and with for the container (or at least the image part of it), set the images as background-size: cover; and then you don't need to worry about the images loading before the isotope plugin can get to work.