JoomlaBlog - Nederlands Weblog over Joomla - Een Page Loader aan je template toevoegen

Een Page Loader aan je template toevoegen

Geschreven door Arjan Menger

vrijdag 09 maart 2007

Mochten sommige websites af en toe traag laden, dan kun je je bezoekers een klein schermpje laten zien waarin wordt aangegeven dat de pagina geladen wordt. Ik heb dit al voor een paar klanten toegepast alleen al om het feit dat ze het er leuk uit vinden zien. Dat is ook wel zo eigenlijk

Als voorbeeld gebruik ik de Page Loader die op www.welldotcom.nl staat.

De pagina wordt geladen...

Open de index.php van je template en voeg onderstaande code in net voor de </head> tag:

<!-- Begin
function hideLoading() {
document.getElementById('pageIsLoading').style.display = 'none'; // DOM3 (IE5, NS6) only
}
//  End -->

Direct na de <body> tag moet je het volgende toevoegen:


<div id="pageIsLoading" style="position: absolute; display: block; padding-left: 44px; padding-right: 12px; width: auto; height: 46px; line-height: 46px; border: 1px solid #ccc; color: #005A6F; font-weight: bold; background-color: #fff; background-image: url(<?php echo $GLOBALS['mosConfig_live_site']; ?>/templates/<?php echo $cur_template; ?>/images/imgLoading.gif); background-position: 6px center; background-repeat: no-repeat;">
   <script type="text/javascript">
   var window_width;
   var window_height;
   if( typeof( window.innerWidth ) == 'number' ) {
     window_width = window.innerWidth;
     window_height = window.innerHeight;
   } else if( document.documentElement &&
       ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
     window_width = document.documentElement.clientWidth;
     window_height = document.documentElement.clientHeight;
   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
     window_width = document.body.clientWidth;
     window_height = document.body.clientHeight;
   }
   var left = Math.round((window_width - 200) / 2);
   var top = Math.round(((window_height - 46) / 3) + 46);
   document.getElementById('pageIsLoading').style.left = left+'px';
   document.getElementById('pageIsLoading').style.top = top+'px';
   </script>
   De pagina wordt geladen...
</div>

Als laatst moet je voor de </body> tag nog de volgende code toevoegen:

if (window.addEventListener) {
window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent) {
var r = window.attachEvent("onload", hideLoading);
} else {
hideLoading();
}

Natuurlijk moet je wel even de afbeelding op je eigen server of website plaatsen en de afbeelding eventueel aanpassen naar eigen smaak.

De pagina wordt geladen...

Commentaar (3) Add Comment

geschreven door A.N. van Dijk, 29 juli 2007

Beste Arjan Menger,

Ik heb bovenstaand geinstalleerd omdat het mij ook wel prettig lijkt alleen blijft nu bij constant de tekst met afbeelding "Pagina word geladen" staan. Na het laden van de pagina blijft dit dus gewoon doorgaan, kun je me aangeen waar hier het probleem ligt ???

geschreven door Arjan Menger, 29 juli 2007

Ik heb http://forum.joomla.org/index....682.0.html als bron gebruikt. Probeer zijn voorbeeld eens. Misschien heb ik iets over het hoofd gezien.

geschreven door A.N. van Dijk, 30 juli 2007

Beste Arjan, ik heb de scripts van bovenstaande link gebruikt en nu werkt het wel, dus ik denk inderdaad dat er ergens iets mist of zo. Bedankt voor je hulp

Schrijf commentaar

U moet ingelogd zijn om commentaar te geven. Eerst registreren als u nog geen account hebt.

< Vorige		Volgende >

[ terug ]