How to display a pending gif until the image is fully loaded

Question

Most popular browsers, when rendering an image, display it line by line from top to bottom when it loads.

I have a requirement that the wait gid be displayed during image loading. When the image is fully loaded, it should be displayed instead of the pending gif.

Answer 1

You can use jQuery load method

You can look here:

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

This is one implementation of the solution.

Answer 2

A clean javascript solution is the following:

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