JavaScript Runtimeloader – dynamic (runtime) loading of JavaScript-Files (Ext JS compatible)
Geschrieben von Benjamin Carl am Donnerstag, den 18. Februar 2010
It’s finally done! Soeben habe ich den JavaScript + CSS – Runtimeloader in Version 0.1 alpha fertiggestellt. Er bietet die Möglichkeit JavaScript- und CSS-Dateien zur Laufzeit nachzuladen und einer gewünschten DOM-Node hinzufügen. Dies ermöglicht beim Einsatz von JavaScript-Frameworks wie z.B. Ext JS eine sehr viel klarere (Ordner- und Datei-) Struktur sowie die Möglichkeit den (ebenfalls von mir geschriebenen) Progress-Indicator anzudocken – welcher dann für eine schöne Ladeanzeige verantworlich ist. So sieht der Anwender ganz genau was genau vor sich geht, wenn mal eben 1 – 1,2 MB Framework-Dateien und Stylesheets geladen werden bis sich ein Bild aufbaut.
Des weiteren verfügt der Runtimeloader über eine ganz bequeme Möglichkeit Dateien in einer Queue angeordnet zu laden und diese wirklich nacheinander zu laden ohne sich dabei auf eingebaute Browserfunktionalität, die ja von Browser zu Browser differiert, verlassen zu müssen.
Der Runtimeloader ist voll Cross-Browser-Kompatibel und wurde getestet unter Windows XP mit SP2 + SP3 und den folgenden Browsern: Internet-Explorer 6/7, Firefox 3.0.15, 3.5.7, Opera 10.10, Safari 4.0.4
Wer interesse an den Quellen hat, der möge bitte einfach kurz einen Kommentar verfassen und mir dann eine Email schreiben an die Emailadresse die im Impressum vermerkt ist. Dies ist ein kleines Experiment – je nach Nachfrage wird das Projekt ggf. noch ein wenig ausgeweitet.
Denjenigen der Kontakt mit mir aufnimmt, erwartet folgendes:
- Die Runtimeloader-class (Runtimeloader.class.js – Singleton JS-Class- komplett kommentiert + debug/dev-Kommentare)
- Die Progress-class (Progress.class.js – Singleton JS-Class – komplett kommentiert + debug/dev-Kommentare)
- Ein Beispiel, wie das ganze einzusetzen ist – inkl. dem Ext JS onReady-replacement Beispiel
Alles komplett als ZIP-Archiv zum testen …
Als Leckerbissen nioch ein kurzer Auszug zur API:
Im Head oder Body Bereich der Seite einfügen:
1 2 | <!-- runtime loader --> <script type="text/javascript" src="/www/view/static/js/de/upside/class/Runtimeloader.class.js"></script> |
Instanziieren:
1 | var runtimeLoader = Runtimeloader.getInstance(); |
Ein Datei-Objekt zum Laden erstellen:
1 2 3 4 5 6 7 8 9 10 11 12 13 | var file = new Object(); file.src = '/www/view/static/js/com/extjs/ext-all.js'; file.wait = true; file.onbeforeload = function(){ // e.g. show progress ... }; file.onprogress = function(){ // e.g. show progress indicator / gif ... }; file.onload = function(){ // e.g. show msg file loaded ... }; file.target = 'body'; |
Add the file to loading queue:
1 | runtimeLoader.queueAdd(file); |
Start loading:
1 2 3 | runtimeLoader.execute(function(){ // e.g. remove progress html+css ... }); |
Neugierig geworden?
Euer Benjamin Carl
Kommentare (3)
Kategorie: HTML + CSS, HowTo's, JavaScript, Open-Source-Software, Tipps + Tricks
