affichage d'une image à la fin de son chargement

Version imprimable

06/02/2008, 11h08
Invité

[résolu] affichage d'une image à la fin de son chargement

hello

Je cherche à éviter l'affichage progressif d'une image (lourde)

En gros, je souhaite avoir un petit logo d'attente tant que la photo se charge. Une fois que le chargement est terminé, l'image s'affiche d'un coup.

Quelqu'un peut me donner des pistes ?
06/02/2008, 11h11
SpaceFrog

mets le style.visibility de l'image à hidden ...

puis dasn le onload de la page lance un setInterval qui va vérifier le complete de l'image

si le complete retourne true sur fais un clearInterval et tu modifies le style.visibility à visible

les fonctions permettant de loader l'image et de vérifier son chargement :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function loadIt(theImage) {
    document.images[0].src = theImage
	verif(document.images[0]);
}
 
function verif(img) {
 
	if(img.complete)
 
		alert("chargé");
 
	else
 
		setTimeout(function() {verif(img);}, 500);
 
}

coté html :

Code:

1
2
3
 
<INPUT TYPE="button" VALUE="grosse image" onClick="loadIt('http://www.paris-360.com/admin/upload/tuilerie_neige hd.jpg',this.form)">
<img src="" />

le reste je te laisse le gèrer ;)

06/02/2008, 11h18
Invité

merci pour les réponses rapides, messieurs :D

je vais regarder ca
06/02/2008, 11h25
SpaceFrog

En plus comme on dit exactement la même chose ...
ça ne doit pas être que des anneries :mrgreen:
07/02/2008, 13h42
Invité

bon, j'ai réussi à obtenir le résultat souhaité avec vos indications.

Par contre, cette méthode pose un problème. Si le navigateur a le javascript dèsactivé, l'image restera en hidden

J'ai pensé à positionner la propriété hidden dans le javascript appelé sur l'évènement onload. Mais cet évènement intervient quand tous les éléments de la page ont fini de se charger. Donc, lorsque javascript est activé, l'image se charge progressivement puis est mise en hidden. Ce n'est évidement pas ce que je veux ...

des idées ?

edit : ah ben c'était tout simple ... j'ai placé le javascript dans le html après la balise img. Je savais pas qu'on pouvait déclencher un js sans évènement.

Je suis vraiment nul en javascript, désolé :?
23/05/2008, 19h39
IsVoid

Merci

Merci à vous, ça m'a été très utile.