Création d'un loader pour images
Bonjour à tous,
certaines pages de mon site sont composées d'une grille d'images. Cette grille est réalisée non pas avec un tableau mais avec des divs qui se répètent, chacune incluant une image (<a href="..."><img src="..." /></a>).
Pour indiquer au visiteur qu'il y a chargement, je cherche à créer un loader s'affichant pendant le chargement des images. Une fois l'image chargée, celui disparait et l'image apparait en fadeIn.
Je suis donc parti pour cela sur le code suivant :
1.HTML
Code:
1
2
3
4
|
<div id="image-loading" class="loading">
<a href="lien..."><img ="images..." /></a>
</div> |
2.CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#image-loading {
width: 309px;
height: 130px;
}
#image-loading.loading {
background-image: url(../images/design/loader.gif);
background-repeat: no-repeat;
background-position: center center;
}
.photo {
display: none;
} |
3. SCRIPT
Code:
1
2
3
4
5
|
$(document).ready(function() {
$("#image-loading").removeClass("loading");
$(".photo").fadeIn(800);
}); |
L'effet à l'air de fonctionner car je vois rapidement le gif animé avant que les images en fondu apparaissent. Le soucis, est que toutes les images semblent être chargées en même temps et donc elles apparaissent toutes en même temps.
Est il possible de faire apparaitre image par image lorsqu'elles se chargent et donc de composer progressivement la grille d'images ?
Merci pour votre aide.
