动态加载js和css
Posted 发烧web开发者
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态加载js和css相关的知识,希望对你有一定的参考价值。
我们在写Web页面的时候,需要引入很多的javascript脚本文件和CSS样式文件,尤其是在网站需求量很大的时候,脚本的需求量也随之变大,这样一来,网站的性能就会大打折扣,因此就出现了动态加载的概念,即在需要的时候才去加载对应的脚本和样式。下面我们就来看看如何实现动态加载。 动态脚本: 先来看一个动态加载js文件的代码示例: [javascript] view plain copy //动态加载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的示例: [javascript] view plain copy //动态执行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样式即可。 那我们就来看看网页的样式是如何动态加载的。通常样式表有两种方式进行加载,一种是<link>标签,一种是<style>标签。因此给出两种方式的代码示例,来说明如何动态加载样式。 使用link标签加载,和上面提到的动态加载js脚本没什么两样,不再多说。 [javascript] view plain copy <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> 比较麻烦点的是使用style来改变样式,因为涉及兼容性问题,所以在执行的时候,需要根据浏览器支持的类型,选择相应的函数来执行这个过程,看下代码示例 [javascript] view plain copy <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> 小结一下:记得老师曾经反复强调,如无必要,勿增实体。同样在程序设计的过程中也一样,我们在程序启动时,就加载很多的东西,势必会影响程序的性能,因此我们要学会在需要的时候,一点一点的进行添加,有点装饰模式的赶脚,同时也是一个灵活性的体现,虽然是一个小的知识点,但是运用好了,是有大用处的。
以上是关于动态加载js和css的主要内容,如果未能解决你的问题,请参考以下文章