JavaScript-Dateien mit jQuery dynamisch nachladen
02.03.2008 - 20:13 JavaScript, Frameworks 5 Kommentar(e)
Zum Ende des Wochenendes noch ein kleiner und wahrscheinlich für erfahrene Programmierer bereits bekannter Kniff zu meinem Lieblingsframework jQuery.
Viele kennen das Problem: Man betreibt eine Seite mit vielen unterschiedlichen jQuery-Plugins oder möchte der Übersichtlichkeit halber seinen Code in mehrere Dateien auslagern. Nun ist jedoch oft der Fall, dass man so manches Plugin oder Script nur auf einigen Unterseiten benötigt. Je nach Seitengröße und Masse des Quelltextes kippt man dem Besucher also oft Dateien auf den Ladebalken, die er in vielen Fällen wahrscheinlich gar nicht braucht. Man kann die Einbindung der einzelnen Dateien natürlich auch Serverseitig über IF-Abfragen steuern, dass ist jedoch ziemlich unflexibel und mühselig.
Nun bin ich heute über die jQuery-Funktion getScript gestolpert. Die Funktion kann aus dem Code heraus an jeder beliebigen Stelle also zusätzliche JavaScript-Dateien abrufen und parsen. Es ist somit unter anderem möglich beim auftreten eines bestimmten Selektors (und nur dann) ein angelegtes Plugin einzubinden.
In der Praxis könnte das also z.B. so aussehen:
if($("div#accordion").length){
$.getScript("/js/plugins/jquery.accordion.js");
}
Mit length überprüfen wir einfach ob der beschriebene Selektor irgendwo im DOM vorkommt, wenn ja wird das Plugin geladen und ausgeführt.
Für viele wohl nichts Neues, aber für Einsteiger vielleicht Hilfreich.
Kommentare zum Thema JavaScript-Dateien mit jQuery dynamisch nachladen:
Genau das konnte ich gerade gebrauchen, womit ich mich wohl als Einsteiger oute (zumindest was jQuery angeht). Die serverseitige if-Abfrage wurde langsam etwas unübersichtlich. Danke Christian.
Vielen Dank für den einfachen aber wirkungsvollen Tipp!
Hallo Christian,
das ganze ist leider so nicht immer empfehlenswert. Ich code gerade an einem Module-Loader für meine Firma (man frage mich nun nicht warum ich das am Sonntag tue :-)) und wollte ursprünglich ebenfalls getScript einsetzen.
Hierbei ist mir allerdings dann aufgefallen, dass jQuery bei getScript ein cachen der Daten verhindert (anhängen eines Timestamps). Hierdruch wird die Intention für den User alles schneller zu machen natürlich zu nichte gemacht:
Man sollte daher eher auf die allgemeine Ajax-Methode von jQuery zurückgreifen und die Cache-Option ausdrücklich auf true setzen:
$.ajax({
url: modulePath,
complete: fn,
dataType: ‘script’,
cache: true
});
Für diese schreibweise gilt natürlich die selbe Warnung bzgl. Safari 2, wie für getScript (http://docs.jquery.com/Ajax/jQuery.getScript#urlcallback). Man sollte also eine Art Queue-System verwenden!
Ich habe mir noch nicht genau angeguckt, wie jQuery ein Script genau lädt (XHR, DOM-Injection…), aber hier könnte es evtl. ebenfalls zwischen den Browsern Unterschiede beim Cachen/Performance geben. Das muss man verifizieren. Falls du da was weisst, lass es mich wissen.
Grüsse
Alex
Kommentar-Feed für diesen Artikel
Kommentarfunktion für diesen Artikel geschlossen.
Verdreht den IE6-Nutzern den Kopf... Nachtrag zu: Verdreht den IE6-Nutzern den Kopf...
Danke!