動態加載CSS,JS文件

var Head = document.getElementsByTagName('head')[0],style = document.createElement('style');
//文件所有加載完成顯示DOM
function linkScriptDOMLoaded(parm){
	style.innerHTML = 'body{display:none}';//動態加載文件形成樣式表渲染變慢,爲了防止DOM結構在樣式表渲染完成前顯示形成抖動,先隱藏body,樣式表讀完再顯示
	Head.insertBefore(style,Head.firstChild)
	var linkScript, linckScriptCount = parm.length, currentIndex = 0;	
	for ( var i = 0 ; i < parm.length; i++ ){
		if(/\.css[^\.]*$/.test(parm[i])) {
			linkScript = document.createElement("link");
			linkScript.type = "text/" + ("css");
			linkScript.rel = "stylesheet";
			linkScript.href = parm[i];
		} else {
			linkScript = document.createElement("script");
			linkScript.type = "text/" + ("javascript");
			linkScript.src = parm[i];
		}
		Head.insertBefore(linkScript, Head.lastChild)
		linkScript.onload = linkScript.onerror = function(){
			currentIndex++;
			if(linckScriptCount == currentIndex){
				style.innerHTML = 'body{display:block}';
				Head.insertBefore(style,Head.lastChild)
			}
		}
	}	
}
//異步加載css,js文件
function linkScript(parm, fn) {
	var linkScript;
	if(/\.css[^\.]*$/.test(parm)) {
		linkScript = document.createElement("link");
		linkScript.type = "text/" + ("css");
		linkScript.rel = "stylesheet";
		linkScript.href = parm;
	} else {
		linkScript = document.createElement("script");
		linkScript.type = "text/" + ("javascript");
		linkScript.src = parm;
	}
	Head.insertBefore(linkScript, Head.lastChild)
	linkScript.onload = linkScript.onerror = function() {
		if(fn) fn()
	}
}



linkScriptDOMLoaded([
	"/content/bootstrap/assets/css/style.css",
	"/content/bootstrap/assets/css/bootstrap.css",
	"/content/bootstrap/assets/js/footable/css/footable.standalone.css"
])
linkScript("/content/bootstrap/assets/css/entypo-icon.css")
linkScript("/content/bootstrap/assets/css/font-awesome.css")
相關文章
相關標籤/搜索