CSS-Stylesheets asynchron nachladen – so gehts!

loadCSS: Die Funktion lässt dich CSS-Stylesheets asynchron nachladen

CSS nur bei Bedarf zu laden, kann mehrere nützliche Anwendungsfälle haben. Ein Beispiel wäre, dass ihr nur die CSS-Regeln beim Seitenaufruf ladet, die bei der Darstellung des sofort sichtbaren Bereichs benötigt werden. Und genau das ist mit loadCSS möglich: CSS dann nachzuladen, wenn ihr es braucht.

Um das zu bewerkstelligen, ist nur ein kleiner JavaScript-Schnipsel im Head erforderlich (hier nutzen wir der besseren Übersichtlichkeit halber nicht die minifizierte Version):

/*!
loadCSS: load a CSS file asynchronously.
[c]2014 @scottjehl, Filament Group, Inc.
Licensed MIT
*/
function loadCSS( href, before, media ){
"use strict";
// Arguments explained:
// `href` is the URL for your CSS file.
// `before` optionally defines the element we'll use as a reference for injecting our <link>
// By default, `before` uses the first <script> element in the page.
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
ss.rel = "stylesheet";
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render
ss.media = "only x";
// inject link
ref.parentNode.insertBefore( ss, ref );
// set media back to `all` so that the styleshet applies once it loads
setTimeout( function(){
ss.media = media || "all";
} );
}

Jetzt müsst ihr nur noch an passender Stelle die loadCSS()-Funktion aufrufen und als Parameter den Pfad zur CSS-Datei übergeben. Das kann dann so aussehen: loadCSS( "style.css" );. Das wars schon. Jetzt könnt ihr beispielsweise Stylesheets von Plugins, etwa einer Lightbox, asynchron nachladen, indem ihr den Aufruf der loadCSS()-Funktion vor das schließende body-Tag stellt. Dadurch verhindert ihr, dass die CSS-Datei direkt beim Seitenaufruf eine der wenigen zeitgleich offenen Server-Verbindungen blockiert oder euer Haupt-Stylesheet unnötig größer wird, wenn ihr die CSS-Dateien einfach in einer großen Datei zusammenführen würdet.

Aktuell gibt es noch das Problem, dass eine CSS-Datei mehrfach nachgeladen werden kann. Wenn beispielsweise eine CSS-Datei durch den Klick eines Links nachgeladen werden soll und dieser Link ein weiteres Mal angeklickt wird, dann steht die CSS-Datei zweimal im head-Element. Auf GitHub gibt es aber bereits einen entsprechenden Pull Request, der bei einem kurzen Test auch funktioniert hat.