Using a Gif and CSS on Large Images

GNN Ads

What?

Using CSS you can put an image as the background image of any images on your web site. Sounds confusing but a image is just a normal HTML DOM element, which means you can add the same CSS attributes to it such as borders and backgrounds.

If you have a website which has large images to load on the page the user will need to wait for them to load leaving a blank space on the screen.

Why?

If you place a background image on all images this will load before the image loads,

So all you have to do is create a smaller image such as a loading gif this will be loaded and it will be displayed in place of the larger image, when the larger image finishes loading it will replace the smaller image.

How?

Just create a small gif loading image and upload it to your website. Then change your CSS by adding this near the top of the CSS file.

img {
     background: url(images/loading.gif) no-repeat;
}