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

Message "Veuillez Patienter" pendant le chargement d'une page - HTML/CSS - Programmation

Marsh Posté le 10-06-2006 à 20:03:47    

Voilà je voudrais ajouter à mon site pendant le chargement d'une page le texte Veuillez Patienter ainsi qu'une petite image gif à savoir : http://img144.imageshack.us/img144/4324/loading6yt.gif


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

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

Marsh Posté le 10-06-2006 à 20:03:47   

Reply

Marsh Posté le 10-06-2006 à 20:26:34    

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

Reply

Marsh Posté le 10-06-2006 à 20:29:40    

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)
Reply

Marsh Posté le 10-06-2006 à 20:33:06    

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.

Reply

Marsh Posté le 10-06-2006 à 20:36:13    

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)
Reply

Marsh Posté le 10-06-2006 à 20:40:11    

[: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
Reply

Marsh Posté le 10-06-2006 à 20:47:09    

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)
Reply

Marsh Posté le 10-06-2006 à 20:54:53    

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

Reply

Marsh Posté le 10-06-2006 à 20:54:59    

je reve il est revenu -_-

Message cité 1 fois
Reply

Marsh Posté le 10-06-2006 à 20:56:19    

mIRROR a écrit :

je reve il est revenu -_-


 
qui moi ??  :pt1cable:

Message cité 1 fois

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

Marsh Posté le 10-06-2006 à 20:56:19   

Reply

Marsh Posté le 11-06-2006 à 02:32:15    

lyneus a écrit :

qui moi ??  :pt1cable:


 
non ta soeur
 
 
 [:al zheimer]

Reply

Marsh Posté le 11-06-2006 à 02:56:17    

sympa....ça fait tj plaisir


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

Marsh Posté le 11-06-2006 à 03:23:41    

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"
Reply

Marsh Posté le 11-06-2006 à 03:25:02    

J'ai trouvé ça :  

Citation :

<!--Waitbox begin-->
<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>
<!--Waitbox end-->


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)
Reply

Marsh Posté le 11-06-2006 à 10:26:46    

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)
Reply

Marsh Posté le 11-06-2006 à 16:30:55    

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

Reply

Marsh Posté le 11-06-2006 à 20:38:15    

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

Message cité 1 fois

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

Marsh Posté le 11-06-2006 à 21:12:14    

lyneus a écrit :

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


 
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
Reply

Marsh Posté le 20-06-2006 à 14:42:50    

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"
Reply

Marsh Posté le 20-06-2006 à 15:50:44    

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

Reply

Marsh Posté le 20-06-2006 à 20:51:13    

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

Code :
  1. <!--DANS LE BODY AU DEBUT :-->
  3. <!--Waitbox begin-->
  4. <div id="waitDiv" class="waitbox" style="left: 42.3%; visibility: hidden; position: absolute; top: 50%" align="center">
  5.   <table cellpadding="6" summary="Splash-Screen Wait">
  6.     <tbody>
  7.       <tr>
  8.         <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>
  9.       </tr>
  10.     </tbody>
  11.   </table>
  12. </div>
  14. <script type="text/javascript">
  15. var DHTML = (document.getElementById || document.all || document.layers);
  16. function ap_getObj(name)
  17. {
  18.   if (document.getElementById) { return document.getElementById(name).style; }
  19.   else if (document.all) { return document.all[name].style; }
  20.   else if (document.layers) { return document.layers[name]; }
  21. }
  22. function ap_showWaitMessage(div,flag)
  23. {
  24.   if (!DHTML) return; var x = ap_getObj(div); x.visibility = (flag) ? 'visible':'hidden'
  25.   if(! document.getElementById) if(document.layers) x.left=280/2; return true;
  26. }
  27. ap_showWaitMessage('waitDiv', 1);
  29. </script>
  30. <!--Waitbox end-->


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

Code :
  1. <!--DANS LE BODY A LA FIN :-->
  3. <!--Waitbox-finish begin-->
  4.   <script type="text/javascript">
  5.   <!--
  6.     setTimeout("ap_showWaitMessage('waitDiv', 0);",800)
  7.   //-->
  8.   </script>
  9. <!--Waitbox-finish end-->


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

Code :
  1. <!--DANS LE CSS :-->
  3. .waitbox
  4. {
  5.    font-weight: bold;
  6.    font-size:10px;
  7.    background-color: #e9e9e9;
  8.    cursor: pointer;
  9.    font-family: Verdana, Arial, Helvetica, sans-serif;
  10.    border: 1px solid #262C25;
  11.    margin-right:2px;
  12.    }


 
Et voici un exemple d'image pour le chargement d'une page ==> http://sas.pursud.org/Divers/Codagetest/loading.gif


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

Marsh Posté le 20-06-2006 à 21:18:20    

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()">
 
:D

Reply

Marsh Posté le 20-06-2006 à 22:27:09    

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 :p

Reply

Marsh Posté le 20-06-2006 à 22:32:46    

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

Reply

Marsh Posté le 20-06-2006 à 23:30:51    

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

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style type="text/css">
  7. #preload {display:none; border:1px solid #71A4D0; width:200px; text-align:center; position:absolute; left:50%;margin-left:-100px; top:50%; margin-top:-50px;}
  8. #preload p {margin:1px; padding:10px; border:1px solid #71A4D0;}
  9. #preload img {margin-top:10px; margin-bottom: 10px;}
  10. </style>
  11. <script type="text/javascript">
  12.     function ShowHide(EltId,Action) {
  13.   var elt = document.getElementById(EltId); if (!elt) return;
  14.   Action = (typeof Action=="undefined" ) ? "" : Action.substring(0,1).toLowerCase();
  15.   with(elt.style) {
  16.    display = (Action=="" ) ? (display=="block" || display=="" ) ? "none" : "block" : (Action=="h" ) ? "none" : "block";
  17.   }
  18.     }
  20. </script>
  21. </head>
  23. <body onload="ShowHide('preload','h')">
  24. <div id="preload">
  25. <p>Pr&eacute;chargement<br>
  26.  <img src="loading.gif" width="96" height="19"><br>
  27.  Veuillez patienter...
  28. </p>
  29. </div>
  30. <script>ShowHide('preload','s');</script>
  31. <img src="http://www.kde.org/img/logos/kdeshirt_l.jpg">
  33. <p>mon contenu</p>
  35. </body>
  36. </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
Reply

Marsh Posté le 20-06-2006 à 23:37:39    

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

Message cité 1 fois
Reply

Marsh Posté le 20-06-2006 à 23:39:06    

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[:petrus75] (1600x1200)

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

Marsh Posté le 20-06-2006 à 23:42:52    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style type="text/css">
  7. #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 }
  8. #preload p {margin:1px; padding:10px; border:1px solid #262C25;background:#e9e9e9;}
  9. #preload img {margin-top:10px; margin-bottom: 10px;}
  10. </style>
  11. <script type="text/javascript">
  12.     function ShowHide(EltId,Action) {
  13.   var elt = document.getElementById(EltId); if (!elt) return;
  14.   Action = (typeof Action=="undefined" ) ? "" : Action.substring(0,1).toLowerCase();
  15.   with(elt.style) {
  16.    display = (Action=="" ) ? (display=="block" || display=="" ) ? "none" : "block" : (Action=="h" ) ? "none" : "block";
  17.   }
  18.     }
  20. </script>
  21. </head>
  23. <body onload="ShowHide('preload','h')">
  24. <div id="preload">
  25. <p>Pr&eacute;chargement<br>
  26.  <img src="loading.gif" width="96" height="19"><br>
  27.  Veuillez patienter...
  28. </p>
  29. </div>
  30. <script>ShowHide('preload','s');</script>
  31. <img src="http://www.kde.org/img/logos/kdeshirt_l.jpg">
  33. <p>mon contenu</p>
  35. </body>
  36. </html>

Reply

Marsh Posté le 20-06-2006 à 23:44:38    

gatsu35 a écrit :

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


 :kaola:

Reply

Marsh Posté le 20-06-2006 à 23:51:03    

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;

Reply

Marsh Posté le 07-07-2010 à 16:41:24    

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 :
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type="text/css">
  5. #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 }
  6. #preload p {margin:1px; padding:10px; border:1px solid #FFFFFF;background:#000000;}
  7. #preload img {margin-top:10px; margin-bottom: 10px;}
  8. </style>
  9. <script type="text/javascript">
  10.     function ShowHide(EltId,Action) {
  11.  var elt = document.getElementById(EltId); if (!elt) return;
  12.  Action = (typeof Action=="undefined" ) ? "" : Action.substring(0,1).toLowerCase();
  13.  with(elt.style) {
  14.    display = (Action=="" ) ? (display=="block" || display=="" ) ? "none" : "block" : (Action=="h" ) ? "none" : "block";
  15.  }
  16.     }
  17. </script>
  18. </head>
  19. <script type="text/javascript">
  20. <!--
  21. var DHTML = (document.getElementById || document.all || document.layers);
  22. function ap_getObj(name)
  23. {
  24.         if (document.getElementById)
  25.         {
  26.                 return document.getElementById(name).style;
  27.         }
  28.         else if (document.all)
  29.         {
  30.                 return document.all[name].style;
  31.         }
  32.         else if (document.layers)
  33.         {
  34.                 return document.layers[name];
  35.         }
  36. }
  38. function ap_showWaitMessage(div, flag)
  39. {
  40.         if (!DHTML) return;
  41.         var x = ap_getObj(div);
  42.         x.visibility = (flag) ? 'visible':'hidden'
  43.         if(! document.getElementById)
  44.                 if(document.layers)
  45.                         x.left=280/2;
  46.         return true;
  47. }
  49. ap_showWaitMessage('waitDiv', 1);
  50. //-->
  51. </script>
  52. <body onload="ShowHide('preload','h')">
  53. <div id="preload">
  54. <p>Pr&eacute;chargement<br>
  55. <img src="loading.gif" width="96" height="19"><br>
  56. Veuillez patienter...
  57. </p>
  58. </div>
  59. <script>ShowHide('preload','s');</script>
  60. </body>
  61. </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 )

Reply

Marsh Posté le 07-07-2010 à 16:44:27    

gatsu35 a écrit :

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

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style type="text/css">
  7. #preload {display:none; border:1px solid #71A4D0; width:200px; text-align:center; position:absolute; left:50%;margin-left:-100px; top:50%; margin-top:-50px;}
  8. #preload p {margin:1px; padding:10px; border:1px solid #71A4D0;}
  9. #preload img {margin-top:10px; margin-bottom: 10px;}
  10. </style>
  11. <script type="text/javascript">
  12.     function ShowHide(EltId,Action) {
  13.   var elt = document.getElementById(EltId); if (!elt) return;
  14.   Action = (typeof Action=="undefined" ) ? "" : Action.substring(0,1).toLowerCase();
  15.   with(elt.style) {
  16.    display = (Action=="" ) ? (display=="block" || display=="" ) ? "none" : "block" : (Action=="h" ) ? "none" : "block";
  17.   }
  18.     }
  20. </script>
  21. </head>
  23. <body onload="ShowHide('preload','h')">
  24. <div id="preload">
  25. <p>Pr&eacute;chargement<br>
  26.  <img src="loading.gif" width="96" height="19"><br>
  27.  Veuillez patienter...
  28. </p>
  29. </div>
  30. <script>ShowHide('preload','s');</script>
  31. <img src="http://www.kde.org/img/logos/kdeshirt_l.jpg">
  33. <p>mon contenu</p>
  35. </body>
  36. </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


Reply

Marsh Posté le 08-07-2010 à 11:25:11    

[:prozac]


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

Marsh Posté le 09-07-2010 à 15:51:29    

[: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
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed