Effet de "chargement" de page ?

**le Jeu Sep 25, 2008 14:18**

Bonjour à tous,

je suis à la recherche d'une méthode permettant d'avoir un effet de "chargement" de la page web suivante.

Je m'explique : j'ai une page qui en appelle une autre (génial non ?

) mais cette dernière est relativement longue à charger (environ 2 à 3 secondes en moyenne). Je voudrais faire en sorte que lorsque l'on clique sur le lien d'envoi vers la deuxième page, la première se noircisse légèrement avec un bidule qui tourne au milieu pour faire patienter.

Bon, je m'explique comme un pied, mais je suis sûr que vous aussi vous avez déjà vu ce genre d'effet quelque part et que vous voyez ce que je veux dire :wink:

J'ai cherché sur GG, mais visiblement pas sur les bons mots cléfs...

**le Jeu Sep 25, 2008 14:24**

"Barre de chargement" comme mot clé peut être ?

**le Jeu Sep 25, 2008 14:30**

Ben en fait c'est plus qu'une barre de chargement. Je ne trouve pas ce que je cherche sur ces mots clefs.
Je voudrais griser l'ensemble de la page et avoir en plus une animation au milieu (genre le petit rond de firefox quand il charge, en plus grand).

punaise, j'ai vu ca y'a pas longtemps en plus... impossible de retrouver où... :evil:

**le Jeu Sep 25, 2008 14:37**

bon, ça ne résout pas mon problème, mais j'ai trouvé un site sympa permettant de générer facielemnt l'animation d'attente sous forme de GIF :

http://www.ajaxload.info/

**le Jeu Sep 25, 2008 15:18**

Ben faut utiliser de l'ajax quoi tu peu pas charger une autre page que celle sur laquelle t'es sinon.

**le Jeu Sep 25, 2008 15:31**

Résolu !
il faut un div caché en transparence 50% que l'on rend visible sur le onclick d'un formulaire par exemple.
le plus dur est de centrer l'image d'animation :wink:

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> <style type="text/css">  </style> </head> <body> <div id="Layer1"><div id="contenu"><img src="themes/classic/images/ajax-loader.gif" /></div></div> <p>contenu de la page</p> <form id="form1" name="form1" method="post" action=""> <input type="submit" name="Submit" value="Envoyer" onclick="document.getElementById('Layer1').style.visibility = 'visible'; return false;" /> </form> </body> </html>

Effet de "chargement" de page ?

Effet de "chargement" de page ?

Lectures recommandées sur ce thème :

Qui est en ligne