Il est nécessaire de juger si ce fichier CSS est chargé, et la pratique de chaque navigateur est relativement grande.
Copier le code du code comme suit:
// Festival du code à Seajs
Fonction StyleOnload (Node, rappel) {
// pour ie6-9 et opéra
if (node.attachevent) {
Node.Attachevent («seulement», rappel);
// avis:
// 1.
// Cette situation, l'opéra ne fait rien, donc le repli à l'heure.
// 2.
}
}
Malheureusement, cette fois dans d'autres navigateurs, il n'est pas si pratique de juger si le CSS est chargé. Et vous devez utiliser l'événement d'intervalle Settimeout:
Copier le code du code comme suit:
// Festival du code à Seajs
Poll de fonction (noeud, rappel) {
if (callback.iscalled) {
Retour;
}
var isloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['sheet']) {
iSloaded = true;
}
}
// pour Firefox
else if (node ['sheet']) {
essayer {
if (nœud ['sheet']. cssrules) {
iSloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
iSloaded = true;
}
}
}
if (islowed) {
// donne le temps de rendre.
setTimeout (function () {
callback ();
}, 1);
}
autre {
setTimeout (function () {
sondage (nœud, rappel);
}, 1);
}
}
setTimeout (function () {
sondage (nœud, rappel);
}, 0);
Le traitement complet donné par Seajs est le suivant:
Copier le code du code comme suit:
Fonction StyleOnload (Node, rappel) {
// pour ie6-9 et opéra
if (node.attachevent) {
Node.Attachevent («seulement», rappel);
// avis:
// 1.
// Cette situation, l'opéra ne fait rien, donc le repli à l'heure.
// 2.
}
// sondage pour Firefox, Chrome, Safari
autre {
setTimeout (function () {
sondage (nœud, rappel);
}, 0); // pour le cache
}
}
Poll de fonction (noeud, rappel) {
if (callback.iscalled) {
Retour;
}
var isloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['sheet']) {
iSloaded = true;
}
}
// pour Firefox
else if (node ['sheet']) {
essayer {
if (nœud ['sheet']. cssrules) {
iSloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
iSloaded = true;
}
}
}
if (islowed) {
// donne le temps de rendre.
setTimeout (function () {
callback ();
}, 1);
}
autre {
setTimeout (function () {
sondage (nœud, rappel);
}, 1);
}
}
// ma fonction de liaison de création dynamique
Function createLlink (cssurl, lnkid, charset, média) {{
var head = document.getElementsByTagName ('Head') [0],
linktag = null;
if (! csSurl) {
Retourne false;
}
linktag = document.createElement ('link');
linktag.setAttribute ('id', (lnkid || 'dynamic-style'));
linktag.setAttribute ('rel', 'stylesheet');
linktag.setAttribute («Charset», (Charset || «UTF-8»));
linktag.setAttribute («Media», (Media || «All»));
linktag.setAttribute ('type', 'text / css');
linktag.href = cssurl;
head.appendChild (linktag);
}
fonction chargecss () {
Var stylenode = createLink ('/wp-content/themes/bluenight/style.css');
StyleOnload (styleenode, function () {) {
alerte ("chargé");
});
}
Quand j'ai vu le code de Seajs, je me suis immédiatement souvenu d'une autre solution que j'ai vu Diego Perini:
Copier le code du code comme suit:
/ *
* Copyright (c) 2010 Diego Perini
* Tous droits réservés.
*
* CSSREAM.JS -CSS Notification de l'état chargé / prêt
*
* Auteur: Diego Perini <Diego.perini à Gmail Com>
* Version: 0.1
* Créé: 20100616
* Version: 20101104
*
* Licence:
* //www.vevb.com * Télécharger:
* http://javascript.nwbox.com/cssream/cssream.js
* /
Fonction cssream (fn, lien) {
var d = document,
T = D.Createstylesheet,
r = t? «règles»: «cssrules»,
s = t?
l = d.getElementsByByTagName ('lien');
// le lien passé ou le dernier nœud de liaison
lien || (link = l.length -1];
Fonction Check () {
essayer {
Return link && link [s] && lien [s] [r] && lien [s] [r] [0];
} Catch (e) {
Retourne false;
}
}
(Fonction Poll () {) {
check () && setTimeout (fn, 0) || setTimeout (Poll, 100);
}) ();
}
En fait, si vous avez lu le code de jugement de l'événement DOMREAM de JQuery, le principe est similaire. Il s'agit également de déterminer si le nœud Dom est chargé par rotation par setTimeout.
De plus, FackBook contient un style fixe à travers le style CSS dynamique, tel que # LoadCSSDom, et Loadcssom est une hauteur de style 1px. Créez ensuite dynamiquement un objet DOM, ajoutez ce style LOADCSSDOM. Ensuite, Settimeout a demandé si Loadcsso avait une hauteur de 1px. Pour la solution de cette méthode de traitement, vous pouvez mettre "CSSP: Chargement CSS avec JavaScript et obtenir un rappel en ligne".
L'auteur de "JavaScript Patterns" Stoyan, dans son blog, a expliqué en détail "Quand une feuille de style est-elle vraiment chargée?".
Après avoir regardé cela, vous pouvez soupirer: Khan, à juger si le CSS est chargé n'est pas si facile! En fait, mon ici est un tubercule, car dans le développement, en plus du chargement dynamique CSS, nous devons également charger dynamiquement l'opération JavaScript et charger dynamiquement les opérations HTML. , mais avant cela, je vous suggère de regarder ces derniers:
"Assurez-vous que les Javascripts / HTML / CSS sont chargés à la demande en cas de besoin", cette bibliothèque est spécifiquement gérée avec un chargement dynamique HTML, CSScript. Comme l'auteur l'introduit:
Assurez-vous une petite bibliothèque JavaScript qui fournit une fonction pratique, assurez-vous que tout.
"Dites à CSS que Javavascript est disponible dès que possible"
Après avoir regardé cela, vous ne serez peut-être pas empêché: lorsque vous êtes des parties de style d'une page Web qui ressembleront et fonctionneront différemment si JavaScript est disponible ou non.
Eh bien, j'ai dit tellement cette fois, j'espère que ce sera utile au développement et à l'apprentissage de chacun!