标签: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