Création d'un loader pour images

[KumKum007]

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.

[SpaceFrog]

individuellement les images acceptent le load ...

cependant pour pouvoir faire le code j'ai besoin de comprendre le lien entre les differents éléments ...

j'ai comme un mauvais pressentiment que tes divs ont tous le même id ???

de plus ton class photo n'apparait pas au niveau des balises ?

[KumKum007]

Bonjour,

en effet les divs "conteneur" ont toutes le même id "image-loading". La grille est composée d'une répétition de cette div, pour afficher les différentes images. C'est vrai que ça n'a pas l'air bon ça...
Comme je ne décide pas le nom et le nombre d'affichage de ces divs (site géré par un cms), il faudrait surement appliquer directement la class de l'effet jquery directement sur la balise img. Est ce bien cela ?
Pour la class "photo" en effet j'ai oublié de la placer dans mon explication. Voici le code html que j'obtiens :

Code :

1
2
3
4
5
6
 
<div id="image-loading" class="loading">
     <div class="photo">
          <img src="http://www.monsite.com/sites/default/files/styles/photo/public/photos/image.jpg" />
     </div>
</div>

Merci pour ton aide.

[SpaceFrog]

les id multiples sont à proscrire !
Résouds d'abord ton souci d'id dupliqués ...