salut, tu peux t'amuser à le programmer toi même, je te donne les principes à utiliser:
en JS: compter le nombre d'images à charger, puis avec cette valeur dessiner un DIV avec une largeur proportionnelle. Par ex: 12 images = width: 120px
à l'intérieur fait un autre div d'une autre couleur (barre de progression) avec une largeur de 0px.
avec CSS met tes images en invisible visibility: hidden;
à chaque image tu inclues une fontion JS qui va vérifier si elle est chargée:
2 méthodes pour être compatible tout navigateurs:
Pour IE: if (this.complete())
Pour Firefox et Safari entre autres: if (this.width>10)
PS: si tu veux utiliser qu'une seule méthode et que toutes tes images sont plus larges que 20px: if (this.width>20) car le petit logo image inaccessible de IE fait moins de 20px.
Pour la fonction collée à l'image:
récupère la largeur de la barre de progression en DOM:
parseInt( document.getElementById('barre').style.width )
et ajoute le multiple entre le nbr d'image et la largeur du premier div (Dans mon exemple = x10) à la largeur de la barre de progression
document.getElementById('barre').style.width = parseInt( document.getElementById('barre').style.width ) + 10 + 'px';
Terminé:
Quand ta barre arrive au bout, celà veut dire que tes images sont toutes en cache navigateur.
PS: dans le div tu peux écrire le texte 'chargement en cours...', ca va le faire !!
