Wie kann man wissen, wann eine dynamisch geladene CSS-Datei vollständig geladen und aktiv ist?

Question

Ich habe eine in a post on StackOverflow beschriebene Technik verwendet, um dynamisch eine CSS-Datei zum HEAD-Tag einer HTML-Seite (in JavaScript) hinzuzufügen. Die Methode, um zu überprüfen, ob die CSS-Datei vollständig geladen wurde (siehe den gleichen Beitrag) wird vom Autor als 'hässlich' beschrieben und meiner Meinung nach ist es ;-) another post schlägt vor, einen 'Lazy loader' zu verwenden (siehe die akzeptierte Antwort) in diesem Post), die Cross-Browser-Probleme berücksichtigt. Obwohl der Code gut aussieht, scheint er für die vorliegende Aufgabe ziemlich komplex zu sein.

Meine Frage ist: Mehr als ein Jahr nach dem zuletzt erwähnten Beitrag (und vielen Verbesserungen in den Browsertechniken) gibt es eine zuverlässige, browserübergreifende Möglichkeit zu prüfen, ob eine dynamisch geladene CSS-Datei bereit ist benutzen?

Answer 1

versuchen, etwas like this

(function() { 
    function cssLoader(url) { 
     var link = document.createElement("link"); 
     link.onload = function(){ 
      console.log('loaded'); 
     }; 
     link.setAttribute("rel", "stylesheet"); 
     link.setAttribute("type", "text/css"); 
     link.setAttribute("href", url); 
     document.getElementsByTagName("head")[0].appendChild(link) 
    } 

    cssLoader('http://jsfiddle.net/css/style.css'); 

}());​ 

Answer 2

Sie können es erreichen, indem Sie Ihre CSS-Datei mit einem img geladen.

var img = document.createElement("img"); 

img.onerror = function() 
{ 
    console.log("loaded"); 
} 

img.src = url; 

Weitere Informationen hier: http://www.backalleycoder.com/2011/03/20/link-tag-css-stylesheet-load-event/