我们在写Web页面的时候,须要引入非常多的JavaScript脚本文件和CSS样式文件,尤其是在站点需求量非常大的时候,脚本的需求量也随之变大,这样一来,站点的性能就会大打折扣。因此就出现了动态载入的概念。即在须要的时候才去载入相应的脚本和样式。以下我们就来看看怎样实现动态载入。

      动态脚本:
       先来看一个动态载入js文件的代码演示样例:
  1. //动态载入JS
  2. var flag=false ;
  3. if(flag){
  4. loadScript('browserdetect.js');
  5. }
  6. function loadScript(url){
  7. var script =document.createElement('script');
  8. script.type='text/javascript';
  9. script.src=url;
  10. document.getElementsByTagName('head')[0].appendChild(script);
  11. }
       如此一来,我们仅仅需控制flag的值就能够控制js脚本文件是否载入到当前页面中。

       再来看一个动态运行js的演示样例:
  1. //动态运行JS
  2. var flag=true ;
  3. if(flag){
  4. executeScript();
  5. }
  6. function executeScript(){
  7. var script =document.createElement('script');
  8. script.type='text/javascript';
  9. var text=document.createTextNode("alert('Lian')");
  10. script.appendChild(text);
  11. document.getElementsByTagName('head')[0].appendChild(script);
  12. }
      动态样式
       我们肯定都对各种换肤功能司空见惯了,可是你肯定没想过换肤是怎样实现的。我也是学到这块才恍然大悟。原来看起来蛮高级的换肤功能居然如此简单:仅仅需换一个CSS样式就可以。
那我们就来看看网页的样式是怎样动态载入的。

通常样式表有两种方式进行载入,一种是<link>标签,一种是<style>标签。

因此给出两种方式的代码演示样例,来说明怎样动态载入样式。

       使用link标签载入,和上面提到的动态载入js脚本没什么两样,不再多说。
  1. <span style="font-size:18px;">//动态运行link
  2. var flag=true;
  3. if(flag){
  4. loadStyle('basic.css');
  5. }
  6. function loadStyle(url){
  7. var link=document.createElement('link');
  8. link.rel='stylesheet';
  9. link.type ='text/css';
  10. link.href=url;
  11. document.getElementsByTagName('head')[0].appendChild(link);
  12. }</span>
       比較麻烦点的是使用style来改变样式,由于涉及兼容性问题,所以在运行的时候,须要依据浏览器支持的类型,选择对应的函数来运行这个过程,看下代码演示样例
  1. <span style="font-size:18px;">//动态运行style
  2. var flag=true;
  3. if(flag){
  4. var style=document.createElement('style');
  5. style.type='text/css';
  6. document.getElementsByTagName('head')[0].appendChild(style);
  7. insertRule(document.styleSheets[0],'#box','background:red',0);
  8. }
  9. function insertRule(sheet,selectorText,cssText,position){
  10. //假设是非IE
  11. if(sheet.insertRule){
  12. sheet.insertRule(selectorText+"{"+cssText+"}",position);
  13. }else if(sheet.addRule){ //假设是IE
  14. sheet.addRule(selectorText,cssText,position);
  15. }
  16. }</span>
       小结一下:记得老师以前重复强调,如无必要。勿增实体。相同在程序设计的过程中也一样,我们在程序启动时。就载入非常多的东西,势必会影响程序的性能。因此我们要学会在须要的时候,一点一点的进行加入。有点装饰模式的赶脚。同一时候也是一个灵活性的体现。尽管是一个小的知识点,可是运用好了,是有大用处的。

JavaScript学习10:动态载入脚本和样式的更多相关文章

  1. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  2. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  3. js中动态载入css js样式

    js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...

  4. 封装实现JavaScript 文件的动态载入功能

    function loadScript(url, callback){ var script = document.createElement ("script") script. ...

  5. javascript学习(10)——[知识储备]链式调用

    上次我们简单的说了下单例的用法,这个也是在我们java中比较常见的设计模式. 今天简单说下链式调用,可能有很多人并没有听过链式调用,但是其实只要我简单的说下的话,你肯定基本上都在用,大家熟知的jQue ...

  6. 第一百一十八节,JavaScript,动态加载脚本和样式

    JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...

  7. JavaScript的DOM_动态加载脚本和样式

    一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们 ...

  8. Extjs学习----------动态载入js文件(减轻浏览器的压力)

    动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...

  9. JavaScript学习(5)-Image对象和动态HTML

    JavaScript学习5 1.image 对象 对象引用 document.images[n] document.images["imageName"] document.ima ...

随机推荐

  1. 网页查看源码中&lt;div&gt的含义

    代码如下: /** HTML转义 **/ String s = HtmlUtils.htmlEscape("<div>hello world</div><p&g ...

  2. HDU 2594 Simpsons’ Hidden Talents(KMP求s1前缀和s2后缀相同部分)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2594 题目大意:给两串字符串s1,s2,,找到最长子串满足既是s1的前缀又是s2的后缀,输出子串,及相 ...

  3. jstat分析JVM内存

    zabbix: Jstat:gcutil:Old space utilization(%) S0  — Heap上的 Survivor space 0 区已使用空间的百分比S1  — Heap上的 S ...

  4. Go语言入门之切片的概念

    切片是对数组的抽象,对切片的改变会改变原数组的值 package main import "fmt" func test6(){ arr:=[...],,,,,,,,,,} s1: ...

  5. jquery li a 样式

    jQuery(".CwebtopNavContainer").find("li:last a").css("color","red ...

  6. 关于IPMI的几个问题

    https://blog.csdn.net/lanyang123456/article/details/51712878

  7. [实战]MVC5+EF6+MySql企业网盘实战(9)——编辑文件名

    写在前面 上篇文章实现了文件的下载,本篇文章将实现编辑文件名的功能. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) ...

  8. docker 解决network has active endpoints

    解决方式 使用 docker network disconnect -f {network} {endpoint-name},其中的 {endpoint-name} 可以使用命令 docker net ...

  9. 《互联网MySQL开发规范》

    一.基础规范 使用 INNODB 存储引擎 表字符集使用 UTF8  所有表都需要添加注释 单表数据量建议控制在 5000W 以内 不在数据库中存储图⽚.文件等大数据 禁止在线上做数据库压力测试 禁⽌ ...

  10. 使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

    序: 上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html) 紧接着上节课的内容 我们这节可来详细讲解机房 ...