CODEWITHSUNDEEP
javascriptjquery
Dimitris Baltas
Dimitris Baltas

Reputation: 3265

How to display a wait gif until image is fully loaded

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.

Upvotes: 4

Views: 12493

Answers (2)

Residuum
Residuum

Reputation: 12064

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';

Upvotes: 5

fl00r
fl00r

Reputation: 83680

You can use jQuery load method

You can look here:

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

This is one implementation of solution

Upvotes: 5

Related Questions