如何判断css是否加载完成?
在通过ajax或者src动态获取js、css文件的时候,我们常常需要判断文件是否加载完成,以便进行进一步的操作。那么如何判断css是否加载完成?
豌豆资源搜索网站https://55wd.com 电脑刺绣绣花厂 ttp://www.szhdn.com
判断CSS是否加载完成的方法:
在head标签内插入 引入css的link标签,如果是ie浏览器直接使用onload事件,其它浏览器用setTimeout循环轮询判断下面属性:
-
如果是webkit内核判断 link节点上的sheet属性
-
其它浏览器判断节点上的sheet.cssRules属性
function loadCss(src, fn) {
var node = document.createElement('link');
node.rel = 'stylesheet';
node.href = src;
document.head.insertBefore(node, document.head.firstChild);
if (node.attachEvent) {//IE
node.attachEvent('onload', function () {
fn(null, node)
});
} else {//other browser
setTimeout(function () {
poll(node, fn);
}, 0);
}
function poll(node, callback) {
var isLoaded = false;
if (/webkit/i.test(navigator.userAgent)) {//webkit
if (node['sheet']) {
isLoaded = true;
}
} else if (node['sheet']) {// for Firefox
try {
if (node['sheet'].cssRules) {
isLoaded = true;
}
} catch (ex) {
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isLoaded = true;
}
}
}
if (isLoaded) {
setTimeout(function () {
callback(null, node);
}, 1);
} else {
setTimeout(function () {
poll(node, callback);
}, 10);
}
}
node.onLoad = function () {
fn(null, node);
}
}
补:js文件加载
function loadScript(src, fn) {
var node = document.createElement("script");
node.setAttribute('async', 'async');
var timeID;
var supportLoad = "onload" in node ;
var loadEvent = supportLoad ? "onload" : "onreadystatechange";
node[loadEvent] = function onLoad() {
if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {
timeID = setTimeout(onLoad);
return;
}
if (supportLoad || timeID) {
clearTimeout(timeID);
fn(null, node);
}
};
document.head.insertBefore(node, document.head.firstChild);
node.src = src;
node.onerror = function (e) {
fn(e);
};
}