How to display a wait gif until image is fully loaded

Question

Most popular browsers, while rendering an image, they display it line-by-line top-to-bottom as it loads.

I have a requirement that a wait gif should be displayed while the image is loading. When the image is fully loaded then it should be displayed instead of the wait gif.

Answer 1

You can use jQuery load method

You can look here:

http://jqueryfordesigners.com/image-loading/

This is one implementation of solution

Answer 2

A pure javascript solution is this:

var realImage = document.getElementById('realImageId');
var loadingImage = document.getElementById('loadingImage');
loadingImage.style.display = 'inline';
realImage.style.display = 'none';

// Create new image
var imgPreloader = new Image();
// define onload (= image loaded)
imgPreloader.onload = function () {
    realImage.src = imgPreloader.src;
    realImage.style.display = 'inline';
    loadingImage.style.display = 'none';
};
// set image source
imgPreloader.src = 'path/to/imagefile';