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.