Comment afficher un gif d'attente jusqu'à ce que l'image soit complètement chargée

Question

Les navigateurs les plus populaires, lors du rendu d'une image, l'affichent ligne par ligne de haut en bas pendant le chargement.

J'ai besoin d'un gif d'attente pendant le chargement de l'image. Lorsque l'image est entièrement chargée, elle doit s'afficher à la place du gif d'attente.

Answer 1

Vous pouvez utiliser la méthode jQuery load

Vous pouvez regarder ici:

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

Ceci est une implémentation de la solution

Answer 2

Une solution pure javascript est ceci:

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