Dealing with variable image sizes in a pinterest like layout/load

Question

I am trying to compile a pinterest style layout for my site. And have accomplished it, other then the load times. I have set about to get the load of my site as fast as possible.

To do so, I have come across the lazy load script (as can be found here: http://www.appelsiini.net/projects/lazyload ) which essentially loads the site first, and then the images, thus speeding up the usability of the site on load, similar to what pinterest does..

The issue I have been having is, while the script works, because we have a box around each image to style and present it, and undefined sizes on the images, the layout comes out all messed up every time. Essentially, the image sizes are always surprising the layout once they load.

What is the best way about going about fixing this problem? What does pinterest do? Similar to them, we have images of all shapes and sizes, that will be added dynamically to our site by users via both php and javascript, so simply figuring out all the sizes of each image ourselves is not something we can do.

Thanks for your help!

Answer 1

Pinterest most likely has measured the images and stored the image dimensions in there database. Then simply output the height within the img tag, width is not dynamic as its set by CSS

First a set rule in css controls the width of the image (this wont change):

.pin .ImgLink img
{
  max-width: 192px;
  opacity: 1;
}

.PinImageImg
{
  min-height:75px;
  background-color:#f2f0f0
}

and then the HTML markup of each img tag controls the height (this changes for each image):

<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />

This way there is no popping of layout as each image is loaded by javascript.