html如何检查加载是否成功,判断js和css是否加载完成

:fa-bell:发现在OSC上面用MD写代码比较爽 忍不住试啦一下

判断CSS是否加载完成

在head标签内插入 引入css的link标签

如果是ie浏览器直接使用onload事件 其它浏览器用setTimeout循环轮询判断下面属性

如果是webkit内核判断 link节点上的sheet属性

其它浏览器判断节点上的sheet.cssRules属性:fa-linkedin-square:

以下是完整代码

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){

node.attachEvent('onload', function(){fn(null,node)});

}else{

setTimeout(function() {

poll(node, fn);

}, 0); // for cache

}

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);

}

}

判断javascript是否加载完成

如果支持onload事件使用onload事件 否则使用onreadystatechange事件

onreadystatechange事件回调很不稳定 有时候出现一次 有时候两次

function loadScript(src,fn){

var node = document.createElement("script");

node.setAttribute('async','async');

var timeID

var supportLoad = "onload" in node

var onEvent = supportLoad ? "onload" : "onreadystatechange"

node[onEvent] = 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.οnerrοr=function(e){

fn(e);

}

}