Lazyload-Skripte wie Bilder

Eine der besten Verbesserungen an HTML in den letzten Jahren war das Attribut „loading="lazy", das Sie Bildern (auch Iframes) hinzufügen können, das den Browsern mitteilt, sie nicht zu laden Bild, bis es im Ansichtsfenster ist.

    <img src="/images/your-image.png" loading="lazy">

Sehr einfach, sehr nützlich. Aber wäre es nicht großartig, wenn Sie dies auch für Skripte tun könnten? Damit Sie Ihre Komponenten nur dann langsam laden können, wenn sie tatsächlich benötigt werden...

Nun, noch eine weitere Funktion: Das Element hat, ist die Fähigkeit, ein Skript auszuführen, nachdem das Bild mit den Attributen onload und onerror geladen (oder nicht geladen) wurde.

    <img 
        src="/images/your-image.png" 
        loading="lazy"
        onload="() => console.log('image loaded')"
    >

Dieser Onload-„Callback“ wird nur ausgelöst, wenn das Bild geladen wird, und wenn das Bild verzögert geladen wurde, wird er nur ausgelöst, wenn sich das Bild im Ansichtsfenster befindet. Et voilà! Ein träge geladenes Skript.

Leider nützt es so nicht viel. Erstens haben Sie ein unerwünschtes Bild auf Ihrer Seite, und zweitens müssen Sie das Javascript einbinden, das Sie ausführen möchten, was den Zweck des verzögerten Ladens irgendwie zunichte macht. Nehmen wir also einige Änderungen vor, um dies zu verbessern.

Das Bild selbst kann alles sein, oder, was noch wichtiger ist, nichts. Wie ich bereits erwähnt habe, gibt es den onerror-Rückruf, der – wie der Name schon sagt – ausgelöst wird, wenn das Bild nicht geladen wird.

Das bedeutet nicht, dass Sie den Quellcode auf ein nicht vorhandenes Bild verweisen müssen, da dies zu einer Konsole voller roter 404-Fehler bezüglich fehlender Bilder führen würde, und das möchte niemand.

Der onerror-Rückruf wird auch ausgelöst, wenn das Quellbild eigentlich kein Bild ist. Der einfachste Weg, dies zu tun, besteht darin, ein Bild mithilfe des data:-Formats „schlecht zu kodieren“. Dies hat auch den Vorteil, dass die Konsole nicht mit Warnungen vor fehlenden Bildern gefüllt wird ?

    <img 
        src="data:," 
        loading="lazy"
        onerror="() => console.log('image not loaded')"
    >

Dies führt immer noch dazu, dass auf der Seite die Miniaturansicht „kaputtes Bild“ angezeigt wird, aber dazu kommen wir noch.

Okay, aber wir müssen noch das Javascript einbinden, das wir ausführen möchten. Wie können wir das beheben?

Nun, da die ES-Modulunterstützung nahezu universell ist, können wir die sehr leistungsstarke Javascript-Ladetechnik Event-Import-then-Default verwenden, um ein Skript zu laden, nachdem ein Ereignis ausgelöst wurde, etwa so:

    <img 
        src="data:," 
        loading="lazy"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >

Hinweis: Dies funktioniert auch für Onclick-, Onchange- usw. Ereignisse
Hinweis: Die Unterstriche sind nur Abkürzungen für den Zugriff auf das Modul. Sie können auch .then(Module => Module.default(this)) schreiben

Okay, also was ist hier los!?

Lass uns zunächst einen Blick darauf werfen, wie eine Komponente aussehen könnte:

// some-component.js

export default element => {
    element.outerHTML = `
        <div class="whatever">
            <p>Hello world!</p>
        </div>
    `;
}

Vielleicht ist Ihnen also aufgefallen, dass ich dies im onerror-Rückruf als Argument an den Standardexport übergeben habe. Der Grund, warum ich das gemacht habe (entschuldigen Sie das Wortspiel?), war, dem Skript die das hat es genannt, denn in diesem (ich habe es wieder getan?) Kontext this = .

Jetzt können Sie einfach element.outerHTML verwenden, um das defekte Bild durch Ihr HTML-Markup zu ersetzen, und schon haben Sie es, verzögert geladene Skripte! ?

Caching und Übergabe von Argumenten

Wenn Sie diese Technik mehr als einmal auf einer Seite verwenden, müssen Sie einen „Cache-Busting“-Index oder eine Zufallszahl an die Daten übergeben:, z. B. so etwas wie:

    <img 
        src="data:,abc123" 
        loading="lazy"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >
    <img 
        src="data:,xyz789" 
        loading="lazy"
        onerror="import('/js/some-other-component.js').then(_ => _.default(this))"
    >

Die Zeichenfolge nach „:“, kann beliebig sein, solange sie unterschiedlich ist.

Eine sehr einfache Möglichkeit, Parameter an die Funktion zu übergeben, wäre die Verwendung des data-something-Attributs im HTML wie folgt:

    <img 
        src="data:," 
        loading="lazy"
        data-message="hello world"
        onerror="import('/js/some-component.js').then(_ => _.default(this))"
    >

Da wir dies an die Funktion übergeben, können Sie wie folgt auf die Datenattribute zugreifen:

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        <div class="whatever">
            <p>${message}</p>
        </div>
    `;
}

Bitte teilen Sie mir Ihre Meinung in den Kommentaren mit! ❤️

Das obige ist der detaillierte Inhalt vonLazyload-Skripte wie Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!