Es ist notwendig, zu beurteilen, ob diese CSS -Datei geladen ist und die Praxis jedes Browsers relativ groß ist.
Kopieren Sie den Code -Code wie folgt:
// Code Festival zu SeaJs
Funktion Styleonload (Knoten, Rückruf) {
// für IE6-9 und Opera
if (node.attachEvent) {
node.attachEvent ('nur', Rückruf);
// beachten:
// 1.
// In dieser Situation geht die Oper nichts, also fällt es zur Auszeit.
// 2.
}
}
Leider ist es in anderen Browsern nicht so bequem zu beurteilen, ob das CSS geladen ist. Und Sie müssen das SetTimeout -Intervallereignis verwenden:
Kopieren Sie den Code -Code wie folgt:
// Code Festival zu SeaJs
Funktionsumfrage (Knoten, Rückruf) {
if (callback.iscalled) {
Zurückkehren;
}
var isloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['Blatt']) {
isloaded = true;
}
}
// für Firefox
sonst if (node ['blatt']) {
versuchen {
if (node ['blatt']. cssRules) {
isloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.Code === 1000) {
isloaded = true;
}
}
}
if (isload) {
// Zeit zum Rendern Zeit geben.
setTimeout (function () {
callback ();
}, 1);
}
anders {
setTimeout (function () {
Umfrage (Knoten, Rückruf);
}, 1);
}
}
setTimeout (function () {
Umfrage (Knoten, Rückruf);
}, 0);
Die vollständige Verarbeitung durch SeaJs ist Folgendes:
Kopieren Sie den Code -Code wie folgt:
Funktion Styleonload (Knoten, Rückruf) {
// für IE6-9 und Opera
if (node.attachEvent) {
node.attachEvent ('nur', Rückruf);
// beachten:
// 1.
// In dieser Situation geht die Oper nichts, also fällt es zur Auszeit.
// 2.
}
// Umfragen für Firefox, Chrome, Safari
anders {
setTimeout (function () {
Umfrage (Knoten, Rückruf);
}, 0) // für Cache
}
}
Funktionsumfrage (Knoten, Rückruf) {
if (callback.iscalled) {
Zurückkehren;
}
var isloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['Blatt']) {
isloaded = true;
}
}
// für Firefox
sonst if (node ['blatt']) {
versuchen {
if (node ['blatt']. cssRules) {
isloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.Code === 1000) {
isloaded = true;
}
}
}
if (isload) {
// Zeit zum Rendern Zeit geben.
setTimeout (function () {
callback ();
}, 1);
}
anders {
setTimeout (function () {
Umfrage (Knoten, Rückruf);
}, 1);
}
}
// meine dynamische Erstellungsverbindungsfunktion
Funktion createLink (cssurl, lnkid, charset, media) {{{{{{{{
var head = document.getElementsByTagName ('head') [0],
linktag = null;
if (! cssurl) {
False zurückgeben;
}
linktag = document.createelement ('link');
linkTag.SetatTribute ('id', (lnkid || 'Dynamisches Stil'));
linkTag.setattribute ('rel', 'stylesheet');
linkTag.SetAttribute ('charSet', (charSet || 'utf-8'));
linkTag.SetatTribute ('Media', (Media || 'All'));
linkTag.SetatTribute ('Typ', 'text/css');
linktag.href = cssurl;
head.Appendchild (linktag);
}
Funktion loadcss () {
Var stylenode = createLink ('/wp-content/themes/bluenight/style.css');
Styleonload (styleEnode, function () {) {
alarm ("geladen");
});
}
Als ich den Code von SeaJs sah, erinnerte ich mich sofort an eine andere Lösung, die ich Diego Perini sah:
Kopieren Sie den Code -Code wie folgt:
/*
* Copyright (C) 2010 Diego Perini
* Alle Rechte vorbehalten.
*
* CSSREAM.JS -CSS LOLDED/FEEFEN -STATE -Benachrichtigung
*
* Autor: Diego Perini <Diego.Perini bei Google Mail com>
* Version: 0.1
* Erstellt: 20100616
* Veröffentlichung: 20101104
*
* Lizenz:
* //www.vevb.com * Download:
* http://javascript.nwbox.com/cssream/cssream.js
*/
Funktion CSSREAM (FN, Link) {
var d = dokument,
T = D.Createstylesheet,
r = t? 'Regeln': 'CSSRULES',
S = T? 'Stylesheet': 'Blatt',
L = D.GetElementsbyByTagName ('Link');
// Link übergeben oder letzter Linkknoten
Link ||.
Funktion check () {
versuchen {
Return Link && link [s] && link [s] [r] && link [s] [r] [0];
} Catch (e) {
False zurückgeben;
}
}
(Funktion Poll () {) {
check () && setTimeout (fn, 0) || setTimeout (Umfrage, 100);
}) ();
}
Wenn Sie den Urteilskodex des Domream -Ereignisses des Jquery gelesen haben, ist das Prinzip ähnlich. Es soll auch feststellen, ob der DOM -Knoten durch Drehung durch SetTimeout geladen wird.
Darüber hinaus enthält Fackbook einen festen Stil über den dynamischen CSS -Stil wie#LoadCSSdom, und LoadCSSdom ist eine Höhe des 1px -Stils. Erstellen Sie dann ein DOM -Objekt dynamisch und fügen Sie diesen LoadCSSdom -Stil hinzu. Dann fragte SetTimeout, ob LoadCSSDO eine Höhe von 1PX habe. Für die Lösung dieser Verarbeitungsmethode können Sie "CSSP: CSS mit JavaScript laden und einen Online -Rückruf erhalten".
Der Autor von "JavaScript Musters" Stoyan erklärte in seinem Blog im Detail "Wann ist ein Stylesheet wirklich geladen?".
Nachdem Sie dies gesehen haben, können Sie seufzen: Khan, zu beurteilen, ob das CSS geladen ist, ist nicht so einfach! Tatsächlich ist mein hier ein Knollenbrand, da wir in der Entwicklung neben dem dynamischen Lade -CSS auch den JavaScript -Vorgang dynamisch laden und HTML -Operationen dynamisch laden müssen. Aber vorher schlage ich vor, diese anzusehen:
"Stellen Sie sicher, dass JavaScripts/HTML/CSS bei Bedarf auf Nachfrage geladen werden", wird diese Bibliothek speziell mit dynamischem Lade-HTML, CSScript, behandelt. Wie der Autor einführte:
Stellen Sie eine winzige JavaScript -Bibliothek sicher, die eine praktische Funktion bietet.
"Sagen Sie CSS, dass JavavaScript so schnell wie möglich verfügbar ist."
Nachdem Sie dies gesehen haben, sind Sie möglicherweise nicht verwickelt: Wenn Sie Teile einer Webseite stylen, die sich anders aussehen und darüber funktionieren, ob JavaScript verfügbar ist oder nicht.
Nun, ich habe diesmal so viel gesagt, ich hoffe, es wird für die Entwicklung und das Lernen aller hilfreich sein!