jQuery show chargement div pour chaque vignette jusqu'à ce qu'il soit chargé

Question

J'ai une page avec 50 miniatures qui se chargent une fois qu'un utilisateur entre sur le site.

Je cherche à créer un div loading... ou éventuellement utiliser un gif animé pour afficher que l'image de la vignette est encore en cours de chargement, puis passer à l'image une fois chargée.

Quelle est la meilleure option à utiliser, pure JS ou jQuery et comment pourrait-on aborder quelque chose comme ça?

Merci à l'avance

Answer 1

sont les vignettes obtenu la largeur et la hauteur fixées?

bien

, Heres une idée sur la façon de le faire ...

var loading = $('<img src="loading.gif" alt="loading" />'); 
$('#thumbnail').each(function(){ 
    var loadIMG = loading.clone(); 
    $(this).after(loadIMG).load(function(){ 
     $(this).show(); 
     loadIMG.hide(); 
    }).hide(); 
}); 

ressources

• load-event
• .after()

Answer 2

Vous pouvez utiliser javascript pur, pour éviter la surcharge de la bibliothèque jQuery. Mais si vous l'utilisez déjà sur votre site, alors pourquoi ne pas l'utiliser.

Answer 3

Vous pouvez lier à l'événement de chargement d'une image .

var img = new Image(640, 480); 
img.src = '...'; 
$(img).bind('load', function() { 
    // Has loaded 
}); 

Peut-être que chaque image est dans un li. Vous pouvez charger la page avec le li ayant une classe de loading. Style avec CSS pour qu'il ressemble à ce que vous voulez que le bit de chargement soit. Liez aux événements load des images et dans le rappel, supprimez la classe loading du parent li.

Answer 4

Vous pouvez utiliser $(window).ready() au lieu de $(document).ready(). Si document se déclenche lorsque DOM est prêt, window se déclenchera lorsque tous les éléments seront prêts. La seule chose est que si vous avez des fichiers externes et le serveur n'est pas disponible, votre script ne se déclenchera pas.