It is necessary to judge whether this CSS file is loaded, and the practice of each browser is relatively large. This time, it is necessary to say that the IE browser is doing well. We can directly handle the CSS loading through the online method:
Copy code code as follows:
// code festival to Seajs
Function styleonload (node, callback) {
// for ie6-9 and opera
if (node.attachevent) {
node.attachevent ('only', callback);
// notice:
//1.
// This Situation, Opera Does Nothing, so fallback to timeout.
// 2.
}
}
Unfortunately, this time in other browsers, it is not so convenient to judge whether the CSS is loaded. FF, Webkit can determine whether it is loaded through the existence of node.sheet.cssrules property. And you need to use the settimeout interval event:
Copy code code as follows:
// code festival to Seajs
Function Poll (Node, Callback) {
if (Callback.ISCALLED) {
Return;
}
var isloaded = false;
if (/Webkit/i.test toStkator.useragent)) {// webkit
if (node ['sheet']) {
isloaded = true;
}
}
// for firefox
else if (node ['sheet']) {
try {
if (node ['sheet']. cssrules) {
isloaded = true;
}
} Catch (ex) {
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// Give time to render.
settimeout (function () {
callback ();
}, 1);
}
else {
settimeout (function () {
poll (node, callback);
}, 1);
}
}
settimeout (function () {
poll (node, callback);
}, 0);
The complete processing given by Seajs is this:
Copy code code as follows:
Function styleonload (node, callback) {
// for ie6-9 and opera
if (node.attachevent) {
node.attachevent ('only', callback);
// notice:
//1.
// This Situation, Opera Does Nothing, so fallback to timeout.
// 2.
}
// Polling for Firefox, Chrome, Safari
else {
settimeout (function () {
poll (node, callback);
}, 0); // for cache
}
}
Function Poll (Node, Callback) {
if (Callback.ISCALLED) {
Return;
}
var isloaded = false;
if (/Webkit/i.Test toSt toSt.com)) {// webkit
if (node ['sheet']) {
isloaded = true;
}
}
// for firefox
else if (node ['sheet']) {
try {
if (node ['sheet']. cssrules) {
isloaded = true;
}
} Catch (ex) {
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// Give time to render.
settimeout (function () {
callback ();
}, 1);
}
else {
settimeout (function () {
poll (node, callback);
}, 1);
}
}
// My dynamic creation Link function
Function Createlink (CSSURL, LNKID, Charset, Media) {{
var head = document.GetelementsBytagname ('head') [0],
linktag = null;
if (! cssurl) {
Return 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);
}
function loadcss () {
Var styleNode = createLink ('/wp-content/themes/bluenight/style.css');
STYLEONLOAD (styleenode, function () {) {
alert ("loaded");
});
}
When I saw the code of Seajs, I immediately remembered another solution I saw Diego Perini:
Copy code code as follows:
/*
* Copyright (C) 2010 Diego Perini
* All rights reserved.
*
* cssream.js -CSS Loaded/Ready State Notification
*
* Author: Diego Perini <Diego.perini at gmail com>
* Version: 0.1
* Created: 20100616
* Release: 20101104
*
* License:
* //www.vevb.com * Download:
* http://javascript.nwbox.com/cssream/cssream.js
*/
Function cssream (fn, link) {
var d = document,
t = d.createstylesheet,
r = t? 'rules': 'cssrules',
s = t? 'STYLESHEET': 'Sheet',
l = d.GetelementsBytagname ('link');
// passed link or last link node
link || (link = l.length -1];
function check () {
try {
Return link && link [s] && link [s] [r] && link [s] [r] [0];
} catch (e) {
Return false;
}
}
(Function Poll () {) {
check () && settimeout (fn, 0) || settimeout (poll, 100);
}) ();
}
In fact, if you have read the code of judgment of the jQuery's Domream event, the principle is similar. It is also determined whether the DOM node is loaded through the SettimeOut inquiry.
In addition, Fackbook contains a fixed style through the dynamic CSS style, such as#loadcssdom, and LoadCSSDOM is a height of 1px style. Then dynamically create a DOM object, add this loadcssdom style. Then SettimeOut asked whether LoadCSSDO had a height of 1px. For the solution of this processing method, you can put on "CSSP: Loading CSS With Javascript and Getting An Online Callback."
The author of "JavaScript Patterns" STOYAN, in his blog, explained in detail "When is a styleSheet Really Loaded?".
After watching this, you may sigh: Khan, judging whether the CSS is loaded is not so easy! In fact, my here is a tuber -brick, because in the development, in addition to the dynamic loading CSS, we also have to dynamically load the JavaScript operation and dynamically load HTML operations. I also write about the relevant content of dynamic loading JavaScript, but before that, I suggest Look at these:
"Ensure Ensure JavaScripts/HTML/CSS Are Loaded on-Demand When NEEDED", this library is specifically handled with dynamic loading HTML, CSSCRIPT. As the author introduced:
Ensure is a Tiny JavaScript Library that process a handy function ensure which all. de. Ensure www.vevb.com Ensures that the Relevant JavaScript and HTML SNIPPETS are almedy in the Browser Dom Before Execution Your Code that users them.
"Tell CSS That Javavascript Is Available Asap"
After watching this, you may not be entangled: When you're style parts of a web page that will look and work differently on whether javascript is available or not.
Well, I said so much this time, I hope it will be helpful to everyone's development and learning!