Preload, Afbeeldingen voorladen
Artikel details
Share
Soortgelijke artikels
High-resolution afbeeldingen op je website verbruiken heelwat bandwidth en je pagina's zullen langer laden. Maar gelukkig is er een manier om afbeeldingen sneller weer te geven, nl preloading.
Normaal gezien worden afbeeldingen in een browser pas geladen nadat het HTTP request verzonden is. Dus bij normale afbeeldingen via een IMG-tag en achtergronden is er geen probleem. Maar het probleem ligt bij rollovermenus. Een rollovermenu zijn afbeeldigen als menu-items en als we over een dergelijk menu-item gaan wordt er een andere afbeelding geladen, vaak met javascript. Maar die nieuwe afbeelding moet nog worden ingeladen. Waardoor we soms voor enkele seconden een leeg vlak zien. Dit valt vooral op als je een trage internetverbinden hebt of op smallband zit.
Tegenwoordig houden browsers een cache bij waardoor dat de volgende keer dat je de pagina laadt, de afbeeldingen wel perfect ziet. Maar dit mag natuurlijk de eerste keer ook niet gebeuren. We kunnen dit voorkomen door een onload event in de body tag de afbeeldingen te laden wanneer jij de pagina opent.
<html>
<head>
<script type="text/javascript">
function preloader() {
afbeeldingen = new Image();
images = new Array();
images[0]="menu-item-hover.jpg"
images[1]="andere-afbeelding.jpg"
images[2]="afb3.jpg"
images[3]="afb4.jpg"
var i = 0;
for(i=0; i<=images.length; i++) {
afbeeldingen.src=images[i];
}
}
</script>
</head>
<body onload="preloader();">
<a href="#" onMouseOver="document.img01.src='menu-item-hover.jpg'">
<img name="img01" src="menu-item-normaal.jpg"></a>
</body>
</html>
Als de pagina geopent wordt, wordt via de het onload event de functie preloader uitgevoerd. Die functie zorgt ervoor dat de afbeeldingen die in de array staan op het zelfde moment geladen worden ... en dus al geladen zijn als ze opgeroepen worden in het rollovermenu.
Om meerdere afbeeldingen in de array te plaatsen, zet dan gewoon het volgende getal tussen de haakjes en de gewenste afbeelding tussen aanhalingstekens. Dus images[4]="nog-een-afb.jpg"
Dit script is in Javascript geschreven maar niet iedereen heeft javascript ingeschakeld. Daarom kun je ook de afbeeldingen die je wilt preloaden onderaan je pagina plaatsen in een IMG-tag en deze op style="display:none;" te zetten. Zodat ze niet getoond worden maar wel voorgeladen worden.
Normaal gezien worden afbeeldingen in een browser pas geladen nadat het HTTP request verzonden is. Dus bij normale afbeeldingen via een IMG-tag en achtergronden is er geen probleem. Maar het probleem ligt bij rollovermenus. Een rollovermenu zijn afbeeldigen als menu-items en als we over een dergelijk menu-item gaan wordt er een andere afbeelding geladen, vaak met javascript. Maar die nieuwe afbeelding moet nog worden ingeladen. Waardoor we soms voor enkele seconden een leeg vlak zien. Dit valt vooral op als je een trage internetverbinden hebt of op smallband zit.
Tegenwoordig houden browsers een cache bij waardoor dat de volgende keer dat je de pagina laadt, de afbeeldingen wel perfect ziet. Maar dit mag natuurlijk de eerste keer ook niet gebeuren. We kunnen dit voorkomen door een onload event in de body tag de afbeeldingen te laden wanneer jij de pagina opent.
<html>
<head>
<script type="text/javascript">
function preloader() {
afbeeldingen = new Image();
images = new Array();
images[0]="menu-item-hover.jpg"
images[1]="andere-afbeelding.jpg"
images[2]="afb3.jpg"
images[3]="afb4.jpg"
var i = 0;
for(i=0; i<=images.length; i++) {
afbeeldingen.src=images[i];
}
}
</script>
</head>
<body onload="preloader();">
<a href="#" onMouseOver="document.img01.src='menu-item-hover.jpg'">
<img name="img01" src="menu-item-normaal.jpg"></a>
</body>
</html>
Als de pagina geopent wordt, wordt via de het onload event de functie preloader uitgevoerd. Die functie zorgt ervoor dat de afbeeldingen die in de array staan op het zelfde moment geladen worden ... en dus al geladen zijn als ze opgeroepen worden in het rollovermenu.
Om meerdere afbeeldingen in de array te plaatsen, zet dan gewoon het volgende getal tussen de haakjes en de gewenste afbeelding tussen aanhalingstekens. Dus images[4]="nog-een-afb.jpg"
Dit script is in Javascript geschreven maar niet iedereen heeft javascript ingeschakeld. Daarom kun je ook de afbeeldingen die je wilt preloaden onderaan je pagina plaatsen in een IMG-tag en deze op style="display:none;" te zetten. Zodat ze niet getoond worden maar wel voorgeladen worden.
Er zijn nog geen reacties op dit artikel.
Om op dit artikel te reageren dient u een account aan te maken.
