03.112014

Wie man JavaScript einfach asynchron laden kann

Statt JavaScript-Dateien direkt in die Seite einzubinden, ist es von Vorteil diese per Lazyload-Verfahren zu laden. Dadurch steht einen z. B. die Möglichkeit offen erst bei Bedarf das benötigte Script durch andere JavaScript-Befehle nach zu laden, wenn man dieses benötigt. Beispielweise kann man erst dann ein Lightbox Script laden lassen, wenn der User das erste mal auf ein Galerie-Bild klickt.

Das initiale Datenvolumen einer Seite wird reduziert und das asynchrone Ladeverhalten sorgt dafür, dass der Aufbau  nicht durch Wartezeiten auf eingebunden JavaScript-Dateien verlangsamt wird.

Ein Weg zum Ziel ist der Einsatz von require.js. Für kleine einfache Anwendungen kann man sich aber mit einer Function wie  dieser hier behelfen:

Ein Beispiel für einfaches Basis-Script:

function lazyload() {
    var lazyloadTag = document.createElement('script');
    lazyloadTag.src = "//beispieldatei.js"; // src setzen
    lazyloadTag.type = 'text/javascript'; // optional, für nicht html5 Seiten
    lazyloadTag.async = true; // HTML5 Asyncron attribute
    var headTag = document.getElementsByTagName('head')[0];
    headTag.appendChild(lazyloadTag);
}

Die einfachste Art dieses Script nach dem Laden der Page auszuführen wäre:

<body onload="lazyload();">

 

Viel Spaß mit diesem Snippet.