Viele Webseiten sind inzwischen schon kleine Anwendungen, die jede Menge Javascript-Zeilen beinhalten. In der Regel werden Javascrip-Dateien im Head global für alle Seiten eingebunden. Je nach Anzahl der Scripts können schon einige hundert Kilobyte entstehen, die vom Browser heruntergeladen und interpretiert werden müssen. Das kann den Seitenaufbau verlangsamen. Besonders ärgerlich, wenn eine Funktion nur bei einem Klick auf einen bestimmten Link gebraucht wird. Klickt der User den Link nicht, hätten wir gar nicht die Datei übertragen müssen. Warum also nicht erst die Javascript-Datei laden, wenn sie wirklich gebraucht wird? Dieses Vorgehen nennt sich Lazy-Load. Das folgende Beispiel soll den Ansatz des Scripts nachladen verdeutlichen.
function lazyload(source)
{
var script = window.document.createElement('script');
script.src=source;
document.getElementsByTagName("head")[0].appendChild(script);
}Zuerst wird mit createElement das Script-Element erstellt, das später in den Header eingefügt wird. Danach weißt man diesem Script-Element den Pfad des Javacript zu. Jetzt muss man nur noch das Script Element im Header der Seite ergänzen. Nach dem diese Zeile im Header ergänzt wurde fängt der Browser automatisch an diese Datei zu laden. Sinnvollerweise ergänzt man diese Funktion noch um eine Callback-Funktion. Dann kann man nach dem Download automatisch eine Funktion aus der Datei aufrufen. Wie man diese Callback-Funktion integriert werde ich im zweiten Teil beschreiben.