标签:javascript 动态加载
我们在写Web页面的时候,需要引入很多的JavaScript脚本文件和CSS样式文件,尤其是在网站需求量很大的时候,脚本的需求量也随之变大,这样一来,网站的性能就会大打折扣,因此就出现了动态加载的概念,即在需要的时候才去加载对应的脚本和样式。下面我们就来看看如何实现动态加载。//动态加载JS var flag=false ; if(flag){ loadScript('browserdetect.js'); } function loadScript(url){ var script =document.createElement('script'); script.type='text/javascript'; script.src=url; document.getElementsByTagName('head')[0].appendChild(script); }
//动态执行JS var flag=true ; if(flag){ executeScript(); } function executeScript(){ var script =document.createElement('script'); script.type='text/javascript'; var text=document.createTextNode("alert('Lian')"); script.appendChild(text); document.getElementsByTagName('head')[0].appendChild(script); }
<span style="font-size:18px;">//动态执行link var flag=true; if(flag){ loadStyle('basic.css'); } function loadStyle(url){ var link=document.createElement('link'); link.rel='stylesheet'; link.type ='text/css'; link.href=url; document.getElementsByTagName('head')[0].appendChild(link); }</span>
<span style="font-size:18px;">//动态执行style var flag=true; if(flag){ var style=document.createElement('style'); style.type='text/css'; document.getElementsByTagName('head')[0].appendChild(style); insertRule(document.styleSheets[0],'#box','background:red',0); } function insertRule(sheet,selectorText,cssText,position){ //如果是非IE if(sheet.insertRule){ sheet.insertRule(selectorText+"{"+cssText+"}",position); }else if(sheet.addRule){ //如果是IE sheet.addRule(selectorText,cssText,position); } }</span>
版权声明:本文为博主原创文章,未经博主允许不得转载。
标签:javascript 动态加载
原文地址:http://blog.csdn.net/lianjiangwei/article/details/46662925