Im ersten Teil dieses Tutorials habe ich die Vorteile und die grundlegende Vorgehensweise, um Javascript nachzuladen, beschrieben. Im zweiten Teil werde ich nun zeigen wie man eine Callback-Funktion integriert und direkt Funktionen aus dem nachgeladenen Script auszuführen.
Die Funktion aus dem ersten Teil wird wie folgt ergänzt:
function lazyload(source,callback) {
var done;
var script = window.document.createElement('script');
script.src=source;
if(typeof callback === 'function'){
script.onreadystatechange = script.onload=function(){
if(!done && script.readyState=="complete") {
callback();
done=1;
script.onload=script.onreadystatechange=null;
}
}
}
document.getElementsByTagName("head")[0].appendChild(script);
}Mit dem Übergabe-Parameter "callback" kann nun Javascript übergeben werden der nach dem Laden ausgeführt wird. Zuerst die Variable callback geprüftm ob es sie auch eine Javascript-Funktion beinhaltet. Danach wird dem onreadystatechangeEvent die Funktion zugewiesen. Damit der callback nur einmal ausgeführt wird prüft die Variable done den Status. Zusätzlich wird der Status des Nachladens der Datei geprüft. Erst wenn die Datei geladen wurde, wird die in der Variable callback hinterlegte Funktion ausgeführt.
Aufruf
loadJs("file.js",function(){
alert("Datei nachgealaden");
});Mit dieser vorgestellten Technik kann man die Anzahl der Requests an den Webserver optimieren. So könnte man um die loadJS Funktion eine Steuerung bauen die nur Ressourcen nachlädt, wenn diese auch gebraucht werden.