判断js和css是否加载完成

为什么80%的码农都做不了架构师？>>>   

• :fa-bell:发现在OSC上面用MD写代码比较爽 忍不住试啦一下
• 判断CSS是否加载完成
  1. 在head标签内插入 引入css的link标签
  2. 如果是ie浏览器直接使用onload事件 其它浏览器用setTimeout循环轮询判断下面属性
  3. 如果是webkit内核判断 link节点上的sheet属性
  4. 其它浏览器判断节点上的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是否加载完成
  1. 如果支持onload事件使用onload事件 否则使用onreadystatechange事件
  2. 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库

转载于:https://my.oschina.net/diqye/blog/479559