Placeholder background/image while waiting for full image to load?

Question

I have a few images on my page. I'm finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Initially the user sees this:

 --------hr--------  text 

Then a few milliseconds later the page jumps to show this:

--------hr-------- [           ] [   image   ] [           ] text 

Is there a simple way that I can show a grey background image of exactly the width and height that the image will occupy, until the image itself loads?

The complicating factor is that I don't know the height and width of the images in advance: they are responsive, and just set to width: 100% of the containing div. This is the HTML/CSS:

<div class="thumbnail"> <img src="myimage.jpeg" /> <div class="caption">caption</div> </div> img { width: 100% }  

Here's a JSFiddle to illustrate the basic problem: http://jsfiddle.net/X8rTB/3/

I've looked into things like LazyLoad, but I can't help feeling there must be a simpler, non-JS answer. Or is the fact that I don't know the height of the image in advance an insurmountable problem? I do know the aspect ratio of the images.

Answer 1

Instead of referencing the image directly, stick it within a DIV, like the following:

<div class="placeholder">     <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div> </div> 

Then in your CSS:

.placeholder {     width: 300;     height: 300;     background-repeat: no-repeat;     background-size: contain;     background-image: url('my_placeholder.png'); } 

Answer 2

Keep in mind - the previous answers that recommend using a div background approach will change the semantic of your image by turning it from an img into a div background. This will result in things like no indexing of these images by a search crawler, delay in loading of these images by the browser (unless you explicitly preload them), etc.

A solution to this issue (while not using the div background approach) is to have a wrapper div to your image and add padding-top to it based on the aspect ratio of the image that you need to know in advance. The below code will work for an image with an aspect ratio of 2:1 (height is 50% of width).

<div style="width:100%;height:0; padding-top:50%;position:relative;">   <img  src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;"> </div> 

Of course - the major disadvantage of this approach is that you need to know the aspect ratio of the image in advance.