按需載入JS和css
阿新 • • 發佈:2019-02-04
/*** js和css按需載入 ***/ function loadJsCss(url, callback ){// 非阻塞的載入 後面的js會先執行 var isJs = /\/.+\.js($|\?)/i.test(url) ? true : false; function onloaded(script, callback){//繫結載入完的回撥函式 if(script.readyState){ //ie script.attachEvent('onreadystatechange', function(){ if(script.readyState == 'loaded' || script.readyState == 'complete'){ script.className = 'loaded'; callback && callback.constructor === Function && callback(); } }); }else{ script.addEventListener('load',function(){ script.className = "loaded"; callback && callback.constructor === Function && callback(); }, false); } } if(!isJs){ //載入css var links = document.getElementsByTagName('link'); for(var i = 0; i < links.length; i++){//是否已載入 if(links[i].href.indexOf(url)>-1){ return; } } var link = document.createElement('link'); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; var head = document.getElementsByTagName('head')[0]; head.insertBefore(link,head.getElementsByTagName('link')[0] || null ); }else{ //載入js var scripts = document.getElementsByTagName('script'); for(var i = 0; i < scripts.length; i++){//是否已載入 if(scripts[i].src.indexOf(url)>-1 && callback && (callback.constructor === Function) ){ //已建立script if(scripts[i].className === 'loaded'){//已載入 callback(); }else{//載入中 onloaded(scripts[i], callback); } return; } } var script = document.createElement('script'); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); onloaded(script, callback); } }