[DOM] Chargement d'image avec progess bar

**seb.49** · 04/10/2007, 18h02

Bonjour,

J'ai cherché tout l'après midi comment afficher en passant ma souris sur une image miniature une grande image mais avec une progess bar pendant que la grosse image se charge.

J'ai essayé avec les settimeout sans succès, avec des simulacre de wait idemn le résultat n'est pas bon. Avez vous un script qui ferai ça. Note je ne peux pas faire de preload au chargement de ma page car je ne sais pas quelels images seront appelées avant de les survoler.

Merci

**SpaceFrog** · 05/10/2007, 09h54

le problème c'est que javascript n'a aucune idée de la taille de l'image à charger ni du debit ...

Au mieux sur un setInterval tu peux tester le complete de l'image pour afficher un gif animé et le faire disparaitre quand l'image est complete... mais une progressbar de 0 à 100 ce n'est pas possible

**Ylias** · 07/10/2007, 16h24

Débutant en JavaScript et intéressé par l'affichage d'une image pendant le chargement, pourrais tu m'en dire plus sur le code a mettre en place pour afficher un petit gif animé pdt le chargement?

Merci d'avance

**jumbay** · 07/10/2007, 17h04

Ils le font bien ici : http://sean.treadway.info/demo/upload/
Bon c'est fait en utilisant RoR mais je pense qu'avec Ajax + PHP c'est faisable.

**Ylias** · 07/10/2007, 17h24

Moi je vuex afficher une image pendant le chargement et que cette image soit remplacé par l'image voulu une fois le chargement terminé...

**jumbay** · 07/10/2007, 18h21

Pour ça c'est plus simple

Il te faut donc 2 images :
<img scr="imgloading" /> (ton image de chargement)
<img src="img1" /> (ton image à afficher après chargement)

Ton img1 doit être en style="display:none". Dans ce cas lorsque la page s'affichera seule l'image de chargement sera visible.
Une fois que ta page est chargée (on dom ready) tu mets ton image de loading (imgloading) en display none et ton autre image (img) en display block.

Et voilà