Asynchroner JavaScript Script-/ Stylesheet-/ Bild-Loader
Es ist schon eine ganze weile her, als ich das letze mal was in meinem Blog veröffentlich habe… Jetzt habe ich aber wieder zeit ein bisschen was zu veröffentlichen.
Heute habe ich mir mal vorgenommen einen asynchronen Resource-Loader für meine Webapps zu schreiben. Natürlich gibt es im Netz für alles mögliche die verschiedensten Scripts, aber bekannterweise tun die meisten nicht das was sie sollen, sind viel zu komplex oder sind einfach mit Funktionen überfüllt die man nicht braucht.
Meine Grundidee dabei war es einen schicken Preloader, der mir alle meine Stylesheets, Scripts und Bilder für meine App vorlädt, zu basteln.
Gesagt – getan, als erstes habe ich mir eine kleine Javascript-Klasse geschrieben, die sich automatisch bei der Scriptausführung in den globalen Variablenbereich der Website initialisiert.
Um die Dateien nun zu laden muss man einfach nur
Natürlich habe ich auch Events eingebaut, mit denen man automatisch den Status der geladenen Dateien abrufen kann. Diese habe ich als sogenannte listener implementiert:
Quelltext ist auf Github verfügbar: rscLoader 0.01.06
Heute habe ich mir mal vorgenommen einen asynchronen Resource-Loader für meine Webapps zu schreiben. Natürlich gibt es im Netz für alles mögliche die verschiedensten Scripts, aber bekannterweise tun die meisten nicht das was sie sollen, sind viel zu komplex oder sind einfach mit Funktionen überfüllt die man nicht braucht.
Meine Grundidee dabei war es einen schicken Preloader, der mir alle meine Stylesheets, Scripts und Bilder für meine App vorlädt, zu basteln.
Gesagt – getan, als erstes habe ich mir eine kleine Javascript-Klasse geschrieben, die sich automatisch bei der Scriptausführung in den globalen Variablenbereich der Website initialisiert.
Um die Dateien nun zu laden muss man einfach nur
rscLoader.load('*Link-Zur-Datei*', '*Typ*');
in den HTML-Body schreiben; die dateien werden automatisch und asynchron geladen, ohne die Website anzuhalten.Natürlich habe ich auch Events eingebaut, mit denen man automatisch den Status der geladenen Dateien abrufen kann. Diese habe ich als sogenannte listener implementiert:
rscLoader.listen('*Typ*', function(stats, resources) {
// Tu alles was du willst
});
In denn Callbacks dieser Events ist es möglich, den aktuellen Status der Datein des übergebenen Typs zu überprüfen und gegebenenfalls eine Aktion durchzuführen.Quelltext ist auf Github verfügbar: rscLoader 0.01.06
