Bilder nacheinander laden - LazyLoad

Ein Bild wird erst dann geladen wenn sein Vorgänger das Event load gefeuert hat

Legacy LazyLoad

Die Idee dahinter ist die, daß die Bilder einer Seite nicht alle auf einmal geladen werden, weil es den Ladevorgang der ganzen Seite ausbremst. Überlicherweise wird hierzu das scroll-Event herangezogen und bei jedem Scrollvorgang geprüft, ob sich ein im HTML-Text notiertes img-Element im Viewport befindet. Erst wenn das der Fall ist, wird das Bild geladen, also dessen URL dem src-Attribut zugewiesen. Diesem Verfahren haften jedoch einige Nachteile an. Durch das Laden eines Bildes verschiebt sich nämlich das img-Element des Nächsten weiter nach unten, so daß dieses Element wieder aus dem Viewport herausfällt sofern es darin vorher sichtbar war. Das führt dazu daß die ganz Seite zappelt, kurzum das Scrollen ist nicht schön.

Contigous Load

Die Vorgehensweise daß ein Bild wird erst dann geladen wird wenn sein Vorgänger das Event load gefeuert hat vermeidet die oben beschriebenen Nachteile. Es werden auf diese Art und Weise nicht alle Bilder zur gleichen Zeit geladen und der Ladevorgang ist unabhängig vom Scrollen auf der Seite. Die von mir entwickelte kleine Library dLoad beeinhaltet zwei erprobte JS-Klassen die Sie gerne testen können. Demo


Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. s​os­@rolf­rost.de.