Defered Loading for Images: Verzögertes Laden von Bildresourcen

Um grosse Bilder oder Bilder "below the Fold" erst zu laden, wenn alle anderen Resourcen komplett geladen und das DOM komplett geladen ist, ist folgende Vorgehensweise zu empfehlen.

Das Markup für Bilder wird folgendermassen angepasst:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=" data-src="path/to/actual/image.jpg">
 

Die initiale Bild-Quelle ist ein 1x1px transparentes png als bas64 Code. (Kann also hier direkt rauskopiert werden.)

Folgerndes Javascript kommt ans Ende des <body>

<script>
function init() {

    var imgDefer = document.getElementsByTagName('img');

    for (var i=0; i<imgDefer.length; i++) {
         if(imgDefer[i].getAttribute('data-src')) {
               imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
         }
     } 
}

window.onload = init;

</script>

Nach dem window.onload event werden also alle "echten" Bild-Quellen ersetzt und nachgeladen.

Tags

JavaScript