KOMPOOS.NL

lazy load images - javascript

home » javascripts » image-effects » lazy-load-image.html

uitleg lazy load image procedure

Je hebt nog geen fractie van een seconde hoeven te wachten voordat de tekst (die je nu leest) op het beeldscherm beschikbaar werd. Toch heeft de server negen extra http-requests "voor zijn kiezen gekregen". Maar daar is hij pas mee begonnen toen alle html van de pagina ingeladen was. Een halve seconde ná dat de pagina (voor wat betreft de html-code) beschikbaar werd is de lazy-load procedure in werking getreden. Op een ultra-snelle breedband verbinding merk je heel erg weinig van het script. De zaken veranderen natuurlijk als je een wat trage adsl-verbinding hebt. Dan ben je heel erg blij dat je niet hoeft te wachten tot dat jouw browser eindelijk eens klaar is met het ophalen van alle "bitjes en bytjes". Plaats het javascript zo laag als mogelijk in de body-sectie van jouw pagina en gebruik de html-code die hieronder staat als voorbeeld voor hoe je de procedure aanroept (met een id).

voorbeeld lazy load afbeeldingen

lazy load plaatje 1 lazy load plaatje 2 lazy load plaatje 3

lazy load plaatje 4 lazy load plaatje 5 lazy load plaatje 6

lazy load plaatje 7 lazy load plaatje 8 lazy load plaatje 9

javascript voor lazy load afbeeldingen


<script>
        function laad_plaatje(){
                document.getElementById("lazy-1").src="lazy-load-image-1.jpg";
                document.getElementById("lazy-2").src="lazy-load-image-2.jpg";
                document.getElementById("lazy-3").src="lazy-load-image-3.jpg";
                document.getElementById("lazy-4").src="lazy-load-image-4.jpg";
                document.getElementById("lazy-5").src="lazy-load-image-5.jpg";
                document.getElementById("lazy-6").src="lazy-load-image-6.jpg";
                document.getElementById("lazy-7").src="lazy-load-image-7.jpg";
                document.getElementById("lazy-8").src="lazy-load-image-8.jpg";
                document.getElementById("lazy-9").src="lazy-load-image-9.jpg";
        }
        setTimeout(function(){laad_plaatje();},400);
</script>

html voorbeeld code voor de lazy load procedure


<p>
<img id="lazy-1" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 1" />
<img id="lazy-2" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 2" />
<img id="lazy-3" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 3" />
</p>
<p>
<img id="lazy-4" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 4" />
<img id="lazy-5" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 5" />
<img id="lazy-6" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 6" />
</p>
<p>
<img id="lazy-7" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 7" />
<img id="lazy-8" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 8" />
<img id="lazy-9" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' width="200" height="300" alt="lazy load plaatje 9" />
</p>