jQuery.getScript() – Scripte asynchron und nur bei Bedarf nachladen

In diesem Artikel möchte ich die Idee, Scripte asynchron nachzuladen um die Performance von Webseiten zu steigern, noch etwas vertiefen. Vor ein paar Tagen konntet ihr in dem Artikel „Scripte nicht blockierend einbinden – HTML5 Attribute defer und async“ erfahren, wie Scripte asynchron über die HTML5 Attribute geladen werden können.

Jetzt möchte ich euch zeigen, wie ihr mittels jQuery.getScript() Funktion Scripte asynchron nachladen könnt, allerdings nur dann, wenn diese auch tatsächlich benötigt werden.

Ein Beispiel aus dem Alltag, welches auch hier auf Webdesign-Podcast.de zur Anwendung kommt, ist folgendes: In den meisten Fällen werden Lightboxen auf jeder Seite eingebunden, auch wenn diese vielleicht gar nicht benötigt werden, weil es auch Seiten ohne Bilder mit entsprechender Vergrößerung gibt.

Die Lightbox ist zwar nur ein mögliches Beispiel, für viele mögliche Anwendungsfälle. In diesem Tutorial / Artikel möchte ich jedoch bei diesem konkreten Beispiel „Lightbox“ bleiben.

Das wäre ein typischer Fall, der vor allem in der CMS-Welt häufig vorkommt, da es in den meisten Fällen keine simple Möglichkeit gibt, zu prüfen ob die Lightbox nun erforderlich ist oder nicht.

Was kann man in diesem Fall also tun? Es wird eine ganz simple JavaScript Abfrage gebaut mit der wir prüfen, ob eine Lightbox benötigt wird. Im Falle der Bilder sowie der Lightbox, die hier auf Webdesign-Podcast.de verwendet wird, sieht die Prüfung wie folgt aus:

jQuery(document).ready(function(){
	check_for_image_links = jQuery('a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".bmp"]]').length;

	if( check_for_image_links >= 1 ) {
		// Es gibt Elemente die eine Lightbox benötigen
	}
});

In dem obigen Beispiel wird geprüft ob es Links (A-Tag’s) gibt, die auf Bilder verweisen. Wenn das der Fall ist,  sollen diese Bilder in einer Lightbox geöffnet werden.

Es geht also weiter und wir befinden uns vom Code her jetzt innerhalb der if-Abfrage, dort wo der Kommentar „// Es gibt Elemente die eine Lightbox benötigen“ eingetragen ist.

Im nächsten Schritt müssen wir nun die Ressourcen für die Lightbox laden, also weitere JavaScripte und CSS-Dateien.

CSS-Dateien asynchron nachladen

Bevor wir uns dem Nachladen und Ausführen der Scripte widmen, müssen wir die CSS-Datei laden. Hierzu wird eine weitere Funktion benötigt, die an einer beliebigen Stelle im JavaScript Code gesetzt werden kann. Sie muss nur so platziert sein, dass sie zum Zeitpunkt der Ausführung in unserem Beispiel auch verfügbar ist.

Der Code für die Funktion sieht wie folgt aus:

function loadCSS(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

Die Funktionsweise ist ganz einfach und selbsterklärend: Nachdem die Funktion implementiert wurde, kann mittels loadCSS(‚meine-css-datei.css‘); eine CSS-Datei über JavaScript nachgeladen werden.

Diesen Funktionsaufruf tragt ihr für alle relevanten CSS-Dateien eurer Lightbox im Bereich der if-Abfrage ein.

Scripte mit jQuery.getScript() nachladen

Im nächsten Schritt müssen die Scripte für die Lightbox nachgeladen werden und die Lightbox muss mittels Callback initialisiert werden.

Zum Nachladen von Scripten bietet jQuery die Funktion jQuery.getScript(). Diese erledigt genau was in diesem Fall benötigt wird: Es lassen sich Scripte nachladen und ein Callback triggern, sobald die Datei erfolgreich geladen wurde.

Es ist ebenfalls möglich ein Fehler-Handling zu implementieren, wenn z.B. das Laden der Scripte fehlschlägt. Diesen Bereich möchte ich in diesem einfachen Beispiel jedoch nicht weiter ausführen. Weitere Infos dazu gibt es allerdings in der hier verlinkten Doku zu jQuery.getScript().

In unserem Beispiel mit der Lightbox könnte der Code in etwa so aussehen:

jQuery.getScript('https://cdn.webdesign-podcast.de/lightbox/lightbox.js', function(){
    // Dieser Callback wird nach dem erfolgreichen Ladevorgang ausgeführt
    lightbox.init({
        overlayOpacity: 0.8
    });
});

Es wird also die Datei „/lightbox/lightbox.js“ geladen und sodann die Funktion ausgeführt, mit der die Lightbox initialisiert wird.

Der komplette Beispiel-Code

Hier noch einmal der komplette Beispiel Code, in dem mittels loadCSS() CSS-Dateien und mittels jQuery.getScript() JavaScripte asynchron nachgeladen werden können:

function loadCSS(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

jQuery(document).ready(function(){
	check_for_image_links = jQuery('a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".bmp"]]').length;

	if( check_for_image_links >= 1 ) {
		// Es gibt Elemente die eine Lightbox benötigen

		// CSS-Dateien laden
		loadCSS('https://cdn.webdesign-podcast.de/lightbox/lightbox.css');

		jQuery.getScript('https://cdn.webdesign-podcast.de/lightbox/lightbox.js', function(){
			// Dieser Callback wird nach dem erfolgreichen Ladevorgang ausgeführt
            lightbox.init({
                overlayOpacity: 0.8
            });
        });
	}
});

Fazit

Mit den gezeigten Funktionen lassen sich sehr einfach Scripte und CSS-Dateien je nach Bedarf nachladen. Da diese Technik nicht nur sinnvoll ist sondern auch spürbar die Ladezeit der Webseite verringern kann, sollte man diese Variante zumindest einmal für die eigenen Webseiten probieren.