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. Ini

Answer 1

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

Then in your CSS:

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