JavaScript学习10:动态加载脚本和样式

页面导航:首页 > 网络编程 > JavaScript > JavaScript学习10:动态加载脚本和样式

JavaScript学习10:动态加载脚本和样式

来源: 作者: 时间:2016-01-23 10:23 【

我们在写Web页面的时候,需要引入很多的JavaScript脚本文件和CSS样式文件,尤其是在网站需求量很大的时候,脚本的需求量也随之变大,这样一来,网站的性能就会大打折扣,因此就出现
我们在写Web页面的时候,需要引入很多的JavaScript脚本文件和CSS样式文件,尤其是在网站需求量很大的时候,脚本的需求量也随之变大,这样一来,网站的性能就会大打折扣,因此就出现了动态加载的概念,即在需要的时候才去加载对应的脚本和样式。下面我们就来看看如何实现动态加载。 动态脚本: 先来看一个动态加载js文件的代码示例:
//动态加载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);
}
如此一来,我们只需控制flag的值就可以控制js脚本文件是否加载到当前页面中。 再来看一个动态执行js的示例:
//动态执行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);
}
动态样式 我们肯定都对各种换肤功能司空见惯了,但是你肯定没想过换肤是如何实现的。我也是学到这块才恍然大悟,原来看起来蛮高级的换肤功能竟然如此简单:只需换一个CSS样式即可。 那我们就来看看网页的样式是如何动态加载的。通常样式表有两种方式进行加载,一种是 标签,一种是
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<