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, die Bilder nicht zu laden Bild, bis es im Ansichtsfenster ist.

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, eine weitere Funktion des -Elements ist die Möglichkeit, ein Skript auszuführen, nachdem das Bild mit den Attributen „onload“ und „onerror“ geladen (oder nicht geladen) wurde.

Dieser Onload-„Callback“ wird nur ausgelöst, wenn das Bild geladen wird, und wenn das Bild träge 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-Callback, 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 ?

Dies führt immer noch dazu, dass die Seite das Miniaturbild „kaputtes Bild“ aufweist, aber dazu kommen wir noch.

Okay, aber wir müssen das Javascript, das wir ausführen möchten, noch einbinden. 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:

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))

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 = `
        

            
Hello world!
        
    `;
}

Vielleicht ist Ihnen also aufgefallen, dass ich dies im onerror-Rückruf als Argument an den Standardexport übergeben habe. Der Grund, warum ich this gemacht habe (entschuldigen Sie das Wortspiel?), war, dem Skript das zu geben, das es aufgerufen hat, denn im Kontext von this (ich habe es schon wieder gemacht?) ist 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:

Die Zeichenfolge nach dem „:“, kann alles 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:

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 = `
        

            
${message}
        
    `;
}

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