Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 856
Dimitris Baltas Avatar asked Dec 29 '22 22:12

Dimitris Baltas


2 Answers

You can use jQuery load method

You can look here:

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

This is one implementation of solution

like image 166
fl00r Avatar answered Jan 15 '23 11:01

fl00r


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';
like image 33
Residuum Avatar answered Jan 15 '23 11:01

Residuum