|
donderdag 05 oktober 2006 |
|
Soms duurt het laden van een webpagina wat langer dan gewenst. Het kan zijn dat dat komt door een trage server, te veel bezoek of doordat er wat scripts uitgevoerd moeten worden. Om ervoor te zorgen dat de bezoekers erop geattendeerd worden dat je server druk doende is met z'n werk, dan kun je ervoor kiezen om een pop-up te laten verschijnen. Op deze pagina vind je een voorbeeld hoe je dat zou kunnen doen op een .php pagina.
De benodigde code bestaat uit drie delen. Als 1e plaats je boven de </head> tag onderstaande code:
Code (klik hier)
<script type="text/javascript">
<!-- Begin
function hideLoading() {
document.getElementById('pageIsLoading').style.display = 'none'; // DOM3 (IE5, NS6) only
}
// End -->
</script>
Vervolgens zet je boven in de body:
Code (klik hier)
<div id="pageIsLoading" style="position: absolute; display: block;
padding-left: 44px; padding-right: 12px; width: auto; height: 46px;
line-height: 46px; border: 1px solid #ff4000; color: #f5f6f8;
font-weight: bold; background-color: #47565f; background-image:
url(http://wago.dyndns.org/Images/loadingcircle.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>
Loading... Please wait...
</div>
Wellicht wil je de kleurstelling wat aanpassen en pas je de url(http://wago.dyndns.org/Images/loadingcircle.gif) wat aan,
zodat het plaatje van je eigen site word gehaald. Dan doet hij het ook
als deze server offline is. Kan natuurlijk ook zijn dat je zelf een
beter gifje hebt.
Tot slot zet je net boven </body> tag:
Code (klik hier)
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent) {
var r = window.attachEvent("onload", hideLoading);
} else {
hideLoading();
}
</script>
Tot zover de benodigde code en dus testen
maar. Eerlijkheidshalve moet ik bekennen dat de code niet uit m'n eigen
doos komt, maar ik mag graag pagina bronnen bekijken.... Ben ff kwijt
waar het origineel vandaan komt.
|
|
Laatst geupdate op ( maandag 05 januari 2009 )
|