- :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.onerror=function(e){
fn(e);
}
}
##点击这里===以上代码结合制作的动态引入js,css文件js库