vanilla lazyload
Version 19.1
LazyLoad ist ein leichtes (2,4 kB) und flexibles Skript, das Ihre Webanwendung beschleunigt , indem es das Laden Ihrer Below-the-Fold-Bilder, animierten SVGs, Videos und Iframes auf den Zeitpunkt verzögert, an dem sie in das Ansichtsfenster gelangen . Es ist in einfachem „Vanilla“-JavaScript geschrieben, nutzt die IntersectionObserver-API, unterstützt reaktionsfähige Bilder, optimiert Ihre Website für langsamere Verbindungen und kann natives Lazy Loading ermöglichen. Weitere Informationen finden Sie in allen Funktionen.
➡️ Springe zu: ? Erste Schritte – HTML – ? Erste Schritte – Skript – ? Rezepte - Demos - ? Tipps & Tricks - ? API - ? Alle Funktionen im Vergleich
Lieben Sie dieses Projekt? ? Kauf mir einen Kaffee!
Damit Ihre Inhalte von LazyLoad geladen werden, müssen Sie einige data- anstelle der tatsächlichen Attribute verwenden. Beispiele unten.
< img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " /> < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />srcset und sizes : < img
alt =" A lazy image "
class =" lazy "
data-src =" lazy.jpg "
data-srcset =" lazy_400.jpg 400w,
lazy_800.jpg 800w "
data-sizes =" 100w "
/> Um einen Platzhalter mit geringer Qualität zu erhalten, fügen Sie das src Attribut hinzu, das auf eine sehr kleine Version des Bildes verweist. ZB src="lazy_10.jpg" .
picture Tags: < picture >
< source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
< source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
< img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture > Um einen Platzhalter mit geringer Qualität zu erhalten, fügen Sie dem img -Tag das src Attribut hinzu, das auf eine sehr kleine Version des Bildes verweist. ZB src="lazy_10.jpg" .
picture Tags: < picture >
< source
type =" image/webp "
data-srcset =" lazy_400.webp 400w,
lazy_800.webp 800w "
data-sizes =" 100w "
/>
< img
alt =" A lazy image "
class =" lazy "
data-src =" lazy.jpg "
data-srcset =" lazy_400.jpg 400w,
lazy_800.jpg 800w "
data-sizes =" 100w "
/>
</ picture > Um einen Platzhalter mit geringer Qualität zu erhalten, fügen Sie dem img -Tag das src Attribut hinzu, das auf eine sehr kleine Version des Bildes verweist. ZB src="lazy_10.jpg" .
WICHTIGER HINWEIS : Um Inhaltsbilder auf Ihren Seiten anzuzeigen, verwenden Sie immer das img -Tag. Dies würde der SEO und der Zugänglichkeit Ihrer Website zugute kommen. Um zu verstehen, ob es sich bei Ihren Bildern um Inhalts- oder Hintergrundbilder handelt, fragen Sie sich: „Möchte der Benutzer meiner Website diese Bilder beim Ausdrucken der Seite sehen?“ Wenn die Antwort „Ja“ lautet, handelt es sich bei Ihren Bildern um Inhaltsbilder und Sie sollten die Verwendung von Hintergrundbildern für deren Anzeige vermeiden.
< div class =" lazy " data-bg =" lazy.jpg " > </ div > < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div > < div
class =" lazy "
data-bg-multi =" url(lazy-head.jpg),
url(lazy-body.jpg),
linear-gradient(#fff, #ccc) "
>
...
</ div > < div
class =" lazy "
data-bg-multi =" url(lazy-head.jpg),
url(lazy-body.jpg),
linear-gradient(#fff, #ccc) "
data-bg-multi-hidpi =" url([email protected]),
url([email protected]),
linear-gradient(#fff, #ccc) "
>
...
</ div > image-set : < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div > image-set : < div
class =" lazy "
data-bg-set ="
url('[email protected]') 1x, url('[email protected]') 2x |
url('[email protected]') 1x, url('[email protected]') 2x
"
>
...
</ div > < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object > < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
< source type =" video/mp4 " data-src =" lazy.mp4 " />
< source type =" video/ogg " data-src =" lazy.ogg " />
< source type =" video/avi " data-src =" lazy.avi " />
</ video >Bitte beachten Sie, dass das Videoposter auch verzögert geladen werden kann.
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >Lieben Sie dieses Projekt? ? Kauf mir einen Kaffee!
Die neueste, empfohlene Version von LazyLoad ist 19.1.3 . Beachten Sie, dass Sie Version 17.9.0 oder niedriger verwenden müssen, wenn Sie Internet Explorer 11 unterstützen müssen.
Verstehen Sie schnell, wie Sie ein Upgrade von einer früheren Version durchführen, indem Sie die praktische Upgrade-Anleitung lesen.
Der einfachste Weg, LazyLoad zu verwenden, besteht darin, das Skript von einem CDN einzubinden.
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >ODER, wenn Sie es lieber als ES-Modul importieren möchten:
< script type =" module " >
import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >Dann in Ihrem Javascript-Code:
var lazyLoadInstance = new LazyLoad ( {
// Your custom settings go here
} ) ; Um sicherzustellen, dass das DOM für Ihre Lazy-Inhalte bereit ist, wenn Sie LazyLoad instanziieren, platzieren Sie das Skript-Tag direkt vor dem schließenden </body> -Tag .
Wenn später mehr DOM eintrifft, z. B. über einen AJAX-Aufruf, müssen Sie lazyLoadInstance.update(); aufrufen. damit LazyLoad das DOM erneut überprüft.
lazyLoadInstance . update ( ) ;async Skripts Wenn Sie möchten, ist es möglich, das Skript von LazyLoad mithilfe async Skripts einzubinden und es zu initialisieren, sobald es geladen ist.
Dazu müssen Sie die Optionen definieren, bevor Sie das Skript einbinden . Sie können bestehen:
{} ein Objekt, um eine einzelne Instanz von LazyLoad abzurufen[{}, {}] ein Array von Objekten, um mehrere Instanzen von LazyLoad abzurufen, jede mit unterschiedlichen Optionen. < script >
// Set the options globally
// to make LazyLoad self-initialize
window . lazyLoadOptions = {
// Your custom settings go here
} ;
</ script >Fügen Sie dann das Skript ein.
< script
async
src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script > Platzieren Sie das Skript-Tag möglicherweise direkt vor dem schließenden </body> -Tag . Wenn Sie das nicht können, könnte LazyLoad ausgeführt werden, bevor der Browser das gesamte DOM geladen hat, und Sie müssen seine update() Methode aufrufen, damit er das DOM erneut überprüft.
async Skripts + Abrufen der Instanzreferenz Dasselbe wie oben, aber Sie müssen den unten gezeigten addEventListener -Code einfügen, bevor Sie das async Skript einbinden.
< script >
// Set the options globally
// to make LazyLoad self-initialize
window . lazyLoadOptions = {
// Your custom settings go here
} ;
// Listen to the initialization event
// and get the instance of LazyLoad
window . addEventListener (
"LazyLoad::Initialized" ,
function ( event ) {
window . lazyLoadInstance = event . detail . instance ;
} ,
false
) ;
</ script >Fügen Sie dann das Skript ein.
< script
async
src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >Jetzt können Sie seine Methoden aufrufen, wie zum Beispiel:
lazyLoadInstance . update ( ) ;DEMO – QUELLE ← für eine einzelne LazyLoad-Instanz
DEMO – QUELLE ← für mehrere LazyLoad-Instanzen
Wenn Sie LazyLoad lieber lokal in Ihrem Projekt installieren möchten, können Sie das tun!
npm install vanilla-lazyload
bower install vanilla-lazyload
Laden Sie eine der neuesten Versionen herunter. Die benötigten Dateien befinden sich im dist -Ordner. Wenn Sie nicht wissen, welches Sie auswählen sollen, verwenden Sie lazyload.min.js oder lesen Sie mehr über Bundles.
Sollten Sie LazyLoad lokal installieren, können Sie es wie folgt als ES-Modul importieren:
import LazyLoad from "vanilla-lazyload" ; Es ist auch möglich (aber nicht empfehlenswert), die Syntax „ require commonJS“ zu verwenden.
Weitere Informationen zur Bündelung von LazyLoad mit WebPack finden Sie in diesem speziellen Repo.
Schauen Sie sich dieses Beispiel für die Verwendung von React mit LazyLoad in der Sandbox an.
Diese Implementierung verwendet dieselben Requisiten, die Sie normalerweise an das img -Tag übergeben würden, rendert jedoch ein verzögertes Bild. Fühlen Sie sich frei, es zu forken und zu verbessern!
Im dist -Ordner finden Sie verschiedene Bundles.
| Dateiname | Modultyp | Vorteile |
|---|---|---|
lazyload.min.js | UMD (Universal Module Definition) | Funktioniert praktisch überall, sogar in Common-JS-Kontexten |
lazyload.iife.min.js | IIFE (Sofort aufgerufener Funktionsausdruck) | Funktioniert als In-Page <script src="..."> , ca. 0,5 KB kleiner als die UMD-Version |
esm/lazyload.js | ES-Modul | Exportiert LazyLoad sodass Sie es sowohl mit <script type="module" src="..."> als auch mit einem Bundler wie WebPack oder Rollup in Ihr Projekt importieren können |
Lieben Sie dieses Projekt? ? Kauf mir einen Kaffee!
In diesem Abschnitt finden Sie fertigen Code zum bequemen Kopieren und Einfügen .
Anwendungsfall : Wenn Ihre träge geladenen Bilder vor dem Laden ihren
altund das leere Bildsymbol anzeigen.
CSS
img : not ([ src ]) : not ([ srcset ]) {
visibility : hidden;
}Eigentlich genau das.
Anwendungsfall : Wenn Sie verhindern möchten, dass nicht vorhandene/defekte Bilder auf Ihrer Website angezeigt werden.
Javascript
var myLazyLoad = new LazyLoad ( {
// Other options here...
callback_error : ( img ) => {
// Use the following line only if your images have the `srcset` attribute
img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
img . setAttribute ( "src" , "[email protected]" ) ;
}
} ) ;HINWEIS: Wenn der Fehler durch einen Netzwerkausfall verursacht wurde (Navigator, wenn er vorübergehend offline ist), versucht Vanilla-Lazyload, die Bilder erneut zu laden, sobald das Netzwerk wieder verfügbar ist.
BEISPIEL – API
Anwendungsfall : Wenn Sie Bilder langsam laden möchten, sich aber die Anzahl der Bilder im Bildlaufbereich ändert, möglicherweise weil sie asynchron hinzugefügt werden.
Javascript
var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;DEMO – QUELLE – API
Anwendungsfall : Sie möchten die Option
use_nativeverwenden, um das Laden von Bildern, Iframes und Videos an die Browser-Engine zu delegieren, sofern dies unterstützt wird, Sie möchten aber auch Hintergrundbilder langsam laden.
HTML
< img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >Javascript
// Instance using native lazy loading
const lazyContent = new LazyLoad ( {
use_native : true // <-- there you go
} ) ;
// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
// DON'T PASS use_native: true HERE
} ) ;DEMO – QUELLE – API
Anwendungsfall : Wenn Ihr Scroll-Container nicht das Hauptbrowserfenster, sondern ein Scroll-Container ist.
HTML
< div class =" scrollingPanel " >
<!-- Set of images -->
</ div >Javascript
var myLazyLoad = new LazyLoad ( {
container : document . querySelector ( ".scrollingPanel" )
} ) ;DEMO – QUELLE – API
Wenn Sie über mehrere Bildlauffelder verfügen, können Sie das folgende Markup und den folgenden Code verwenden.
HTML
< div id =" scrollingPanel1 " class =" scrollingPanel " >
<!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
<!-- Set of images -->
</ div >Javascript
var myLazyLoad1 = new LazyLoad ( {
container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
container : document . getElementById ( "scrollingPanel2" )
} ) ;DEMO – QUELLE – API
Anwendungsfall : Wenn Sie beliebige Skripte oder Funktionen ausführen möchten, wenn bestimmte Elemente in das Ansichtsfenster gelangen
HTML
< div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >JS
// It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
foo : function ( element ) {
element . style . color = "red" ;
console . log ( "foo" ) ;
} ,
bar : function ( element ) {
element . remove ( element ) ;
console . log ( "bar" ) ;
} ,
buzz : function ( element ) {
var span = document . createElement ( "span" ) ;
span . innerText = " - buzz!" ;
element . appendChild ( span ) ;
console . log ( "buzz" ) ;
} ,
booya : function ( element ) {
element . classList . add ( "boo" ) ;
console . log ( "booya" ) ;
}
} ; function executeLazyFunction ( element ) {
var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
if ( ! lazyFunction ) return ;
lazyFunction ( element ) ;
}
var ll = new LazyLoad ( {
unobserve_entered : true , // <- Avoid executing the function multiple times
callback_enter : executeLazyFunction // Assigning the function defined above
} ) ; Verwenden Sie unobserve_entered um zu vermeiden, dass die Funktion mehrmals ausgeführt wird.
Das ist es. Immer wenn ein Element mit dem Attribut data-lazy-function in den Viewport gelangt, ruft LazyLoad die Funktion executeLazyScript auf, die den Funktionsnamen vom Attribut data-lazy-function selbst abruft und ihn ausführt.
DEMO – QUELLE – API
Anwendungsfall : Wenn Sie viele horizontal scrollende Container haben und eine LazyLoad-Instanz auf ihnen instanziieren möchten, jedoch nur, wenn sie in das Ansichtsfenster eintreten.
HTML
< div class =" horizContainer " >
< img
src =""
alt =" Row 01, col 01 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_01&w=200&h=200 "
/>
< img
src =""
alt =" Row 01, col 02 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_01_col_02&w=200&h=200 "
/>
<!-- ... -->
</ div >
< div class =" horizContainer " >
< img
src =""
alt =" Row 02, col 01 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_01&w=200&h=200 "
/>
< img
src =""
alt =" Row 02, col 02 "
data-src =" https://placeholdit.imgix.net/~text?txtsize=19&txt=row_02_col_02&w=200&h=200 "
/>
<!-- ... -->
</ div >Javascript
var lazyLoadInstances = [ ] ;
var initOneLazyLoad = function ( horizContainerElement ) {
// When the .horizContainer element enters the viewport,
// instantiate a new LazyLoad on the horizContainerElement
var oneLL = new LazyLoad ( {
container : horizContainerElement
} ) ;
// Optionally push it in the lazyLoadInstances
// array to keep track of the instances
lazyLoadInstances . push ( oneLL ) ;
} ;
// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
elements_selector : ".horizContainer" ,
callback_enter : initOneLazyLoad ,
unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ; Das ist es. Immer wenn ein .horizContainer Element das Ansichtsfenster betritt, ruft LazyLoad die Funktion initOneLazyLoad auf, die eine neue Instanz von LazyLoad für das .horizContainer -Element erstellt.
DEMO – QUELLE – API
Lieben Sie dieses Projekt? ? Kauf mir einen Kaffee!
Haben Sie nicht das Rezept gefunden, das genau zu Ihrem Fall passt? Wir haben Demos!
Der Demos-Ordner enthält über 30 Anwendungsfälle von Vanilla-Lazyload. Vielleicht finden Sie dort, was Sie suchen.
| Typ | Titel | Code | Demo |
|---|---|---|---|
| Inhalt | Einfache verzögert geladene Bilder, die keinen Platzhalter verwenden | Code | Live |
| Inhalt | Lazy-Bilder, die ein Inline-SVG als Platzhalter verwenden | Code | Live |
| Inhalt | Lazy-Bilder, die eine externe SVG-Datei als Platzhalter verwenden | Code | Live |
| Inhalt | Lazy responsive Bilder mit srcset | Code | Live |
| Inhalt | Lazy responsive Bilder mit dem <picture> -Tag und dem media (Art Direction) | Code | Live |
| Inhalt | Lazy responsive Bilder mit srcset und sizes (unter Verwendung von data-sizes ) | Code | Live |
| Inhalt | Lazy responsive Bilder mit srcset und sizes (unter Verwendung einfacher sizes ) | Code | Live |
| Inhalt | Lazy-Video mit mehreren <source> -Tags, verschiedenen Vorladeoptionen, KEINE automatische Wiedergabe | Code | Live |
| Inhalt | Lazy-Video mit mehreren <source> -Tags, verschiedenen Vorladeoptionen, MIT automatischer Wiedergabe | Code | Live |
| Inhalt | Faules Laden von Hintergrundbildern | Code | Live |
| Inhalt | Faules Laden mehrerer Hintergrundbilder | Code | Live |
| Inhalt | Faules Laden von Hintergrundbildern mit image-set() | Code | Live |
| Inhalt | Verzögertes Laden von Iframes | Code | Live |
| Inhalt | Verzögertes Laden animierter SVG- und PDF-Dateien | Code | Live |
| Inhalt | Lazy WebP-Bilder mit dem <picture> -Tag und dem type Attribut für WebP | Code | Live |
| Laden | Asynchrones Laden von LazyLoad mit <script async> | Code | Live |
| Laden | Asynchrones Laden mehrerer LazyLoad-Instanzen mit <script async> | Code | Live |
| Fehler | Testen Sie das Fehlerladeverhalten, wenn restore_on_error false ist | Code | Live |
| Fehler | Testen Sie das Fehlerladeverhalten, wenn restore_on_error true ist | Code | Live |
| Technik | Bilder beim Laden einblenden | Code | Live |
| Technik | Lazy Load-Bilder in reinen CSS-horizontalen Schiebereglern (Netflix-Stil) | Code | Live |
| Technik | Erstellen Sie träge Swiper-Instanzen und laden Sie träge Swiper-Bilder | Code | Live |
| Technik | Führen Sie Funktionen langsam aus, wenn bestimmte Elemente in das Ansichtsfenster gelangen | Code | Live |
| Technik | So verwalten Sie den Druck einer Seite mit faulen Bildern | Code | Live |
| Technik | Eine Popup-Ebene mit Lazy-Bildern in einem scrollbaren Container | Code | Live |
| Einstellungen | Mehrere scrollbare Container | Code | Live |
| Einstellungen | Einzelner scrollbarer Container | Code | Live |
| Methoden | So stellen Sie DOM in seinem ursprünglichen Zustand restore() und/oder destroy() LazyLoad | Code | Live |
| Methoden | Dynamischen Inhalt hinzufügen, dann update() LazyLoad | Code | Live |
| Methoden | Dynamischen Inhalt hinzufügen, dann update() LazyLoad übergibt ein NodeSet von Elementen | Code | Live |
| Methoden | Laden Sie pünktliche Bilder mit der Methode load() | Code | Live |
| Methoden | Laden Sie alle Bilder auf einmal mit loadAll() | Code | Live |
| Prüfen | Testen Sie auf mehrere Schwellenwerte | Code | Live |
| Prüfen | Testverhalten mit versteckten Bildern | Code | Live |
| Prüfen | Testleistung, verzögertes Laden von Hunderten von Bildern | Code | Live |
| Einheimisch | Testen Sie das native Lazy Loading von Bildern OHNE eine Zeile Javascript, nicht einmal dieses Skript | Code | Live |
| Einheimisch | Testen Sie das native Lazy Loading von Bildern bedingt mit der Option use_native (siehe API). | Code | Live |
Lieben Sie dieses Projekt? ? Kauf mir einen Kaffee!
