201001Dez

Head JS: Mehrere Bibliotheken nacheinander laden

Bei größeren Projekten kann es vorkommen, dass mehrere JavaScript-Dateien oder Bibliotheken verwendet werden. Ein Problem hierbei kann die Reihenfolge darstellen, in der die Dateien geladen werden. Im Kopfbereich des HTML-Gerüsts fällt durch die Platzierung mehrere Skript-Ressourcen unnötiger Ballast an, der das Laden einer Website blockiert. Werden die JavaScript-Dateien im Fußbereich nachgeladen, kann es zu Komplikationen kommen, da bestimmte Abhängigkeiten bei den Skripten bestehen.
Eine Lösung könnte beispielsweise in dem serverseitigen Kombinieren mehrerer Dateien liegen. Wer die Dateien stattdessen auf Client-Basis nacheinander laden möchte, kann zu einer kleinen JavaScript-Klasse greifen, die separate JavaScript-Dateien wie Module behandelt und in korrekter Reihenfolge lädt. Ähnlich wie RequireJS stellt Head JS eine derartige Lösung dar — so können Skripte parallel geladen und zudem in der richtigen Reihenfolge ausgeführt werden.

Head JS - The only script in your HEAD

Ein Beispiel für die Nutzung von Head JS im Kopfbereich:

  • head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
  • // Callback, wenn alle Skripte geladen wurden
  • });

Ebenso kann die Bibliothek im Fußbereich aufgerufen und gleichzeitig mit einem JavaScript-Framework verknüpft werden:

  • head.ready(function() {
  • $("#element").jquery_plugin();
  • });
  •  
  • head.js("/path/to/jquery.js");

Mit Head JS lassen sich dadurch also verschiedene Funktionalitäten wie Browser-Detektoren, dynamische CSS-Attribute oder HTML5-Funktionen problemlos nutzen, da die Skripte richtig geladen werden.

RSS-Feed abonnieren