Créer un indicateur de chargement de la page PDF Imprimer Envoyer
joomla - joomla archives

indicateur de chargementVous avez certainement déjà vu un indicateur de chargement sur un site Internet, en parcourant le web. Cet indicateur peut être fort utile dans le cas où votre serveur est sur chargé et la navigation n'est pas assez fluide, ça c'est côté pratique. Sinon, ce petit script peut vous aider à personnaliser votre site Joomla.

Aujourd'hui, nous allons voir comment créer un indicateur de chargement (loader) pour Joomla, pour faire patientez vos visiteurs. On parle de Joomla, mais cette astuce est valable pour n'importe quel site, suffit de l'adapter à l'environnement.

note : Avant toutes modification, faites une sauvegarde !!!

1. Ouvrez le fichier index.php de votre template Joomla et rajouter ce code entre les balises <head> et </head>

code
  1. <script type="text/javascript">
  2. function hideLoading() {
  3. document.getElementById('pageIsLoading').style.display = 'none';
  4. }
  5. </script>

2. Juste après la balise <body> ajouter ce code

code
  1. <div id="pageIsLoading"
  2. style="
  3. position:          absolute;
  4. display:            block;
  5. padding-left:    44px;
  6. padding-right:  12px;
  7. width:             auto;
  8. height:            46px;
  9. line-height:      46px;
  10. border:            1px solid #890000;
  11. color:              #000000;
  12. font-weight:    bold;
  13. background-color: #e5e5e5;
  14. background-image: url(http://www.nartconcept.fr/loading.gif);
  15. background-position: 6px center;
  16. background-repeat: no-repeat;">
  17. <script type="text/javascript">
  18. if (typeof window_width == 'undefined' || typeof window_height == 'undefined') {
  19. var window_width;
  20. var window_height;
  21. if( typeof( window.innerWidth ) == 'number' ) {
  22.   window_width = window.innerWidth;
  23.   window_height = window.innerHeight;
  24. } else if( document.documentElement &amp;&amp;
  25.     ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  26.   window_width = document.documentElement.clientWidth;
  27.   window_height = document.documentElement.clientHeight;
  28. } else if( document.body &amp;&amp; ( document.body.clientWidth || document.body.clientHeight ) ) {
  29.   window_width = document.body.clientWidth;
  30.   window_height = document.body.clientHeight;
  31. }
  32. }
  33. var left = Math.round((window_width - 200) / 2);
  34. var top = Math.round(((window_height - 46) / 3) + 46);
  35. document.getElementById('pageIsLoading').style.left = left+'px';
  36. document.getElementById('pageIsLoading').style.top = top+'px';
  37. </script>
  38. Chargement... Veuillez patientez...
  39. </div>

Bien entendu, vous pouvez modifier à votre convenance les paramètres d'affichage et le texte, ainsi que l'url de l'image.

3. Rajoutez le code suivant, à la fin de votre page index.php, juste avant la balise </body>

code
  1. <script type="text/javascript">
  2. if (window.addEventListener) {
  3. window.addEventListener('load', hideLoading, false);
  4. } else if (window.attachEvent) {
  5. var r = window.attachEvent("onload", hideLoading);
  6. } else {
  7. hideLoading();
  8. }
  9. </script>

4 . Reste qu'à mettre le fichier loading.gif ci-joint à la racine de votre site et admirer le fruit de votre travail ;)
 

Ajouter un Commentaire


Code de sécurité
Rafraîchir

  © 2007 - 2010 NART CONCEPT