I am using Masonry to lay out a set of images. The images could be any aspect ratio (I cannot limit the aspect ratios to a predefined list). I'm using percentage column widths and the images are responsive (I'm using Picturefill). I use imagesLoaded to monitor image load and tell Masonry to re-layout the images as needed.
This all works fine, but there is a gap between page load and all the visible images loading which means someone viewing the site can see them jump or animate to their final position. Before all the images are loaded, Masonry cannot accurately lay them out as it doesn't know the heights of the images. I could hide images that are visible until they have been loaded and laid out.
However it seems to me I should be able to do better as I have the image dimensions available to me on the server. If the images were not responsive I could just set the img
Is there any way I can use this information to allow Masonry to layout the images before they are loaded, given that the images must have percentage widths.
Note: Each element in the grid is actually a
li that wraps an
a that wraps the