Effet de "chargement" de page ?

LeMulotNocturne · 25 Septembre 2008

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...

herveG · 25 Septembre 2008

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

LeMulotNocturne · 25 Septembre 2008

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:

LeMulotNocturne · 25 Septembre 2008

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/

Mitsu · 25 Septembre 2008

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

LeMulotNocturne · 25 Septembre 2008

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:

<!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">
<!--
#Layer1 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	visibility: hidden;
	left: 0;
	top: 0;
	filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity: 0.5;	
	background-color: #000000;
}
#contenu { 
	position: absolute;
	top: 50%;
	left: 50%; 
	margin-top: -25px; /* moitié de la hauteur de l'image d'animation*/
	margin-left: -100px; /* moitié de la largeur l'image d'animation*/
} 
-->
</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>