Message "Veuillez Patienter" pendant le chargement d'une page

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Message "Veuillez Patienter" pendant le chargement d'une page

lyneus

Voilà je voudrais ajouter à mon site pendant le chargement d'une page le texte Veuillez Patienter ainsi qu'une petite image gif à savoir :

Message édité par lyneus le 10-06-2006 à 20:29:49

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

Publicité

2xyo

2*yo = yoyo

C'est mal les pages trop lourdes ! Allèges ton code, vires tes images, utilises du css et tu verras la vie en rose !

lyneus

Non, elles se chargent pas spécialement au bout de longtemps mais par exemple pour les 56k voilà c'est tous, c'est préventif.

Message édité par lyneus le 10-06-2006 à 20:29:55

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

2xyo

2*yo = yoyo

Si c'est pour le site http://sas.pursud.org/Divers/Site_ [...] index.html, commences déjà par nettoyer le code et éssayes de ne pas utiliser 100Ko d'images.

lyneus

Oui c'est pour ce site...

Ils est pas bien mon code ?!

Et comment ça 100ko d'images, quelle(s) image(s) ?

Message édité par lyneus le 10-06-2006 à 20:36:42

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

2xyo

2*yo = yoyo

[:totoz]

Citation :

Voilà, vous n'avez plus qu'à sélectionner la chanson que vous souhaitez écouter.
/!\ C'est illégal de télécharger de la musique illégalement /!\

:heink:

Près de 60 erreurs dans la page... Et elle ne passe même pas la validation http://validator.w3.org/check?uri= [...] index.html

Et pour les images, tu devrais quand même savoir !

Message édité par 2xyo le 10-06-2006 à 20:42:59

lyneus

Oui mais bon ils expliquent pas les erreurs
c'est space

ps: ça sert à rien de s'acharner sur moi j'ai rien fait de mal ^^

edit : http://validator.w3.org/check?uri= [...] mes.rox.fr et ils me disent qu'il y à seulement
9 erreurs, je sais pas les lignes correspondent pas...

Message cité 1 fois
Message édité par lyneus le 10-06-2006 à 20:51:19

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

2xyo

2*yo = yoyo

lyneus a écrit :

Oui mais bon ils expliquent pas les erreurs
c'est space

FAUX :

Citation :

Sorry, I am unable to validate this document because on line 123 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

lyneus a écrit :

ps: ça sert à rien de s'acharner sur moi j'ai rien fait de mal ^^

Je ne m'acharne pas, je constate.

lyneus a écrit :

edit : http://validator.w3.org/check?uri= [...] mes.rox.fr et ils me disent qu'il y à seulement
9 erreurs, je sais pas les lignes correspondent pas...

Tu a validé la page de redirection.... Elle contient juste le code pour renvoyer à ta page via une frame(c'est mal les frames)..

mIRROR

Chevreuillobolchévik

je reve il est revenu -_-

Message cité 1 fois

lyneus

mIRROR a écrit :

je reve il est revenu -_-

qui moi ?? :pt1cable:

Message cité 1 fois

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

Publicité

mIRROR

Chevreuillobolchévik

lyneus a écrit :

qui moi ?? :pt1cable:

non ta soeur

[:al zheimer]

lyneus

sympa....ça fait tj plaisir

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

LimDul

Comment ça j'ai tort ?

Si tu veut utiliser de lourdes images je sait que tu peut afficher une image en attendant qu'une autre soit chargée en ariere plan.

Tu pourai ainsi metre ton gif animé qui est tout légé sur toutes les images en "temporaire". Les visiteurs pouraient lire tes pages et voir que des image sont en cours de chargement.

Donc tu n'aurai pas une seule barre de progrétion mais plusieurs. Et quand une imae serai chargés elle remplace ton gif automatiquement.

Je cherche comment faire et si je trouve je revient.

---------------
Liberkey, colection d'utilitaires sur clef USB / Silverstone DS380 - Mini tour ITX 8 baies Hot-swap 3.5"

lyneus

J'ai trouvé ça :

Citation :

<div id="waitDiv" class="waitbox" style="left: 46.3%; visibility: hidden; position: absolute; top: 50%" align="center">
<table cellpadding="6" summary="Splash-Screen Wait">

<tbody>
<tr>
<td><div align="center"><b>loading site</b><br><img src="loading.gif" border="0" align="top"><br clear="all">please wait</div></td>
</tr>
</tbody>
</table>
</div>

<script type="text/javascript">
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name)
{
if (document.getElementById) { return document.getElementById(name).style; }
else if (document.all) { return document.all[name].style; }
else if (document.layers) { return document.layers[name]; }
}
function ap_showWaitMessage(div,flag)
{
if (!DHTML) return; var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
if(! document.getElementById) if(document.layers) x.left=280/2; return true;
}
ap_showWaitMessage('waitDiv', 1);

</script>

Sauf que le mess ne s'enlève pas...

PS: j'ai vu ceci ici http://www.tsviewer.com/

Message édité par lyneus le 11-06-2006 à 03:27:36

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

lyneus

C'est bon j'ai réussi à le faire fonctionner, j'avais pas vue qu'il y avait une seconde partie juste avant la balise

Citation :

</body>

Message cité 1 fois
Message édité par lyneus le 11-06-2006 à 10:27:25

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

Hermes le Messager

Breton Quiétiste

lyneus a écrit :

C'est bon j'ai réussi à le faire fonctionner, j'avais pas vue qu'il y avait une seconde partie juste avant la balise

Citation :

</body>

T'as pas une barre de progression en bas à droite de ton navigateur qui indique le chargement de ta page ? Si ?

Bon, ben donc tu sais maintenant qu'une barre de préload ne sert à rien.

lyneus

Roo....!!! Je suis le bienvenue, merci

Message cité 1 fois

---------------
[Feed-back] LYNEUS (MàJ :22/10/08)

xtof_83

Freeride Spirit

lyneus a écrit :

Roo....!!! Je suis le bienvenue, merci

Ben on est pas méchant, on te dis juste que ça sert à rien, mais bon, si tu aimes mettre du code en plus c'est ton droit. :sweat:

Message édité par xtof_83 le 11-06-2006 à 21:13:54

LimDul

Comment ça j'ai tort ?

Je suis désolé je n'ai pas retrouvé commen afficher une immage temporairement pendant qu'une autre se charge derier en HTLM.
Je sait que c'est possible mais je ne retrouve pas dsl

---------------
Liberkey, colection d'utilitaires sur clef USB / Silverstone DS380 - Mini tour ITX 8 baies Hot-swap 3.5"

gatsu35

Blablaté par Harko

tu fous l'image dans un block, au depart il est affiché
et dans <body onload="tucacheslebloc()">

mais c'est à chier car si le user n'a pas JS d'activé c'est dans son cul pour visiter ton site

lyneus

Non mais c'est bon, j'ai trouvé. Pour les personnes qui se posent la question voici comment il faut faire :

----------------------------------------------------------------------------------------

Code :

<div id="waitDiv" class="waitbox" style="left: 42.3%; visibility: hidden; position: absolute; top: 50%" align="center">
<table cellpadding="6" summary="Splash-Screen Wait">
<tbody>
<tr>
<td><div align="center"><b>Chargement en cours</b><br><img src="loading.gif" alt="Chargement en cours, Veuillez patienter..." title="Chargement en cours, Veuillez patienter..." border="0" align="top" /><br clear="all">Veuillez patienter</div></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name)
{
if (document.getElementById) { return document.getElementById(name).style; }
else if (document.all) { return document.all[name].style; }
else if (document.layers) { return document.layers[name]; }
}
function ap_showWaitMessage(div,flag)
{
if (!DHTML) return; var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
if(! document.getElementById) if(document.layers) x.left=280/2; return true;
}
ap_showWaitMessage('waitDiv', 1);
</script>

----------------------------------------------------------------------------------------

Code :

<script type="text/javascript">
<!--
setTimeout("ap_showWaitMessage('waitDiv', 0);",800)
//-->
</script>

----------------------------------------------------------------------------------------

Code :

.waitbox
{
font-weight: bold;
font-size:10px;
background-color: #e9e9e9;
cursor: pointer;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #262C25;
margin-right:2px;
}

Et voici un exemple d'image pour le chargement d'une page ==>

Message édité par lyneus le 20-06-2006 à 20:52:44

The-Shadow

Développeur
T'as été voir dans ton profil?

Ouai, moi j'ai plus simple.

Tu fais un splash screen parce que si ta page d'accueil est trop lourde, tu fais fuir les visiteurs et ensuite, tu fais un
<body onbeforeunload="affichemondivpatientez()">

gatsu35

Blablaté par Harko

Nan mais tu as pas plus lourd comme comme pourri :fou: (je parle pas pour toi the-Shadow et au passage tu me donne une idée

lyneus

bah quoi il est pas bien mon code ?? ^^ En tous cas il fonctionne...

gatsu35

Blablaté par Harko

tiens voila moins lourd que ton caca et fonctionne sous FF, IE, Opera

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#preload {display:none; border:1px solid #71A4D0; width:200px; text-align:center; position:absolute; left:50%;margin-left:-100px; top:50%; margin-top:-50px;}
#preload p {margin:1px; padding:10px; border:1px solid #71A4D0;}
#preload img {margin-top:10px; margin-bottom: 10px;}
</style>
<script type="text/javascript">
function ShowHide(EltId,Action) {
var elt = document.getElementById(EltId); if (!elt) return;
Action = (typeof Action=="undefined" ) ? "" : Action.substring(0,1).toLowerCase();
with(elt.style) {
display = (Action=="" ) ? (display=="block" || display=="" ) ? "none" : "block" : (Action=="h" ) ? "none" : "block";
}
}
</script>
</head>
<body onload="ShowHide('preload','h')">
<div id="preload">
<p>Préchargement<br>
<img src="loading.gif" width="96" height="19"><br>
Veuillez patienter...
</p>
</div>
<script>ShowHide('preload','s');</script>
<img src="http://www.kde.org/img/logos/kdeshirt_l.jpg">
<p>mon contenu</p>
</body>
</html>

La technique consiste à cacher dès le début le bloc pour eviter que ceux qui ont le JS de désactivé se prennent un block de merde qui les fait chier.

Ensuite pendant le chargement de la page, j'ai mis un appel à la fonction juste après le html du block, comme ça, le bloc est affiché même si la page n'est pas entièrement chargée.
Et dès que la page est entièrement chargée, la fonction onload du body est appellée, c'est là que je fais disparaître le bloc

Message cité 1 fois
Message édité par gatsu35 le 20-06-2006 à 23:34:48

lyneus

mouais, mais mon "caca" était tout configuré, il était bien centré, avec son arrière plan et tout...bref...^^

Message cité 1 fois

gatsu35

Blablaté par Harko

lyneus a écrit :

mouais, mais mon "caca" était tout configuré, il était bien centré, avec son arrière plan et tout...bref...^^

ET qu'est ce qui t''écorcherai de juste modifier la CSS dans ce sans, et mon truc contrairement à ce que tu crois il est largement plus centré que le tien [:petrus75] , ton truc sur mon écran il est un peu trop à gauche (1600x1200)

Message cité 1 fois
Message édité par gatsu35 le 20-06-2006 à 23:40:04

gatsu35

Blablaté par Harko

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#preload {display:none; border:1px solid #262C25; width:200px; text-align:center; position:absolute; left:50%;margin-left:-100px; top:50%; margin-top:-50px; font:bold 10px Verdana, Arial, Helvetica, sans-serif; cursor:pointer }
#preload p {margin:1px; padding:10px; border:1px solid #262C25;background:#e9e9e9;}
#preload img {margin-top:10px; margin-bottom: 10px;}
</style>
<script type="text/javascript">
function ShowHide(EltId,Action) {
var elt = document.getElementById(EltId); if (!elt) return;
Action = (typeof Action=="undefined" ) ? "" : Action.substring(0,1).toLowerCase();
with(elt.style) {
display = (Action=="" ) ? (display=="block" || display=="" ) ? "none" : "block" : (Action=="h" ) ? "none" : "block";
}
}
</script>
</head>
<body onload="ShowHide('preload','h')">
<div id="preload">
<p>Préchargement<br>
<img src="loading.gif" width="96" height="19"><br>
Veuillez patienter...
</p>
</div>
<script>ShowHide('preload','s');</script>
<img src="http://www.kde.org/img/logos/kdeshirt_l.jpg">
<p>mon contenu</p>
</body>
</html>

lyneus

gatsu35 a écrit :

ton truc sur mon écran il est un peu trop à gauche [:petrus75] (1600x1200)

:kaola:

gatsu35

Blablaté par Harko

Bon petit cours sur le centrage pour les noobs en CSS :

pour centrer un bloc sur une page il faut :

le positionner en absolu >> position:absolute;
le positionner à gauche en relative à la moitié de l'écran>> left:50%
le positionner en haut en relative à la moitié de l'écran>> top:50%
il n'est pas totalement centré, il suffit de mettre des marges négatives correspondant à la moitié de ses dimensions :
margin-top:-50px;
margin-left:-100px;

TYCON1ER

Gatsu 35 ton code n'est pas bon (il me met une image avec une croix et met le texte mon contenu en dessous
SI VOUS ETES INTERESSE VOICI LE CODE( tu viens te faire battre par un débutant gatsu 35 ):

Code :

<html>
<head>
<title></title>
<style type="text/css">
#preload {display:none; border:1px solid #FFFFFF; width:200px; text-align:center; position:absolute; left:50%;margin-left:-100px; top:50%; margin-top:-50px; font:bold 10px Verdana, Arial, Helvetica, sans-serif; cursor:pointer }
#preload p {margin:1px; padding:10px; border:1px solid #FFFFFF;background:#000000;}
#preload img {margin-top:10px; margin-bottom: 10px;}
</style>
<script type="text/javascript">
function ShowHide(EltId,Action) {
var elt = document.getElementById(EltId); if (!elt) return;
Action = (typeof Action=="undefined" ) ? "" : Action.substring(0,1).toLowerCase();
with(elt.style) {
display = (Action=="" ) ? (display=="block" || display=="" ) ? "none" : "block" : (Action=="h" ) ? "none" : "block";
}
}
</script>
</head>
<script type="text/javascript">
<!--
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name)
{
if (document.getElementById)
{
return document.getElementById(name).style;
}
else if (document.all)
{
return document.all[name].style;
}
else if (document.layers)
{
return document.layers[name];
}
}
function ap_showWaitMessage(div, flag)
{
if (!DHTML) return;
var x = ap_getObj(div);
x.visibility = (flag) ? 'visible':'hidden'
if(! document.getElementById)
if(document.layers)
x.left=280/2;
return true;
}
ap_showWaitMessage('waitDiv', 1);
//-->
</script>
<body onload="ShowHide('preload','h')">
<div id="preload">
<p>Préchargement<br>
<img src="loading.gif" width="96" height="19"><br>
Veuillez patienter...
</p>
</div>
<script>ShowHide('preload','s');</script>
</body>
</html>

J'ai modifier quelques trucs dans ton code et FINALEMENT LYNEUS TU AS FAIT UN BON CODE (OU "CACA" COMME DIT GATSU 35 LOL lyneus je trouve ton code estmieux que gatsu 35 )

TYCON1ER

gatsu35 a écrit :

tiens voila moins lourd que ton caca et fonctionne sous FF, IE, Opera

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#preload {display:none; border:1px solid #71A4D0; width:200px; text-align:center; position:absolute; left:50%;margin-left:-100px; top:50%; margin-top:-50px;}
#preload p {margin:1px; padding:10px; border:1px solid #71A4D0;}
#preload img {margin-top:10px; margin-bottom: 10px;}
</style>
<script type="text/javascript">
function ShowHide(EltId,Action) {
var elt = document.getElementById(EltId); if (!elt) return;
Action = (typeof Action=="undefined" ) ? "" : Action.substring(0,1).toLowerCase();
with(elt.style) {
display = (Action=="" ) ? (display=="block" || display=="" ) ? "none" : "block" : (Action=="h" ) ? "none" : "block";
}
}
</script>
</head>
<body onload="ShowHide('preload','h')">
<div id="preload">
<p>Préchargement<br>
<img src="loading.gif" width="96" height="19"><br>
Veuillez patienter...
</p>
</div>
<script>ShowHide('preload','s');</script>
<img src="http://www.kde.org/img/logos/kdeshirt_l.jpg">
<p>mon contenu</p>
</body>
</html>

Dj YeLL

$question = $to_be || !$to_be;

[:prozac]

---------------
Gamertag: CoteBlack YeLL

Pascal le nain

[:benn25]

Et prochainement, un enrichissant débat entre kévins et forumeux [:rapscallion:1]

Message édité par Pascal le nain le 09-07-2010 à 15:52:52

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Message "Veuillez Patienter" pendant le chargement d'une page

Sujets relatifs
Chargement d'un fichier de sauvegarde	gérer le pb des images non-chargées lors de l'affichage d'1 page web
Définir l'ordre de chargement des éléments d'une page	lancer une page php avec un fichier bat
Chargement d'un site web	CSS: affichage d'une balise div en bas de page
Imposer une taille de page pour impression	page par page
mise en page texte de resultat de recherche propre
Plus de sujets relatifs à : Message "Veuillez Patienter" pendant le chargement d'une page

Page générée en 0.171 secondes