我们在写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. kvm安装准备

    到实际情况下,做虚拟化是直接做在真机上. 但实验时,可以在虚拟机上进行.(因为做实验的时候没办法连接到桥接模式的网络,所以使用了NAT方式来连接网络) 在vmware安装centos 64bit fo ...

  2. group by的运用

    select a.* from zeai_photo a inner join (select max(id) mid,userid from zeai_photo group by userid) ...

  3. POJ 3159 Candies(差分约束+spfa+链式前向星)

    题目链接:http://poj.org/problem?id=3159 题目大意:给n个人派糖果,给出m组数据,每组数据包含A,B,C三个数,意思是A的糖果数比B少的个数不多于C,即B的糖果数 - A ...

  4. Java容器---Arrays & Collections工具类

    1.Array & Arrays 与Collection & Collections区别 (1)Collection": 是一个接口,与其子类共同组成一个Collection ...

  5. day4装饰器

    Python装饰器 1.必备 def foo(): print(foo) <function foo at 0x7f62db093f28> >>> foo <fun ...

  6. 【LOJ】 #2520. 「FJOI2018」所罗门王的宝藏

    题解 发现似乎相当于问一个2000个元的方程组有没有解-- 然而我懵逼啊-- 发现当成图论,两个点之间连一条边,开始BFS,每个点的值赋成边权减另一个点的点权 如果一个环不合法那么肯定无解 代码 #i ...

  7. 性能测试常用的linux命令

    性能测试常用的linux命令 linux测试nginx64bitredhatlighttpd 查看日志    awk '$4 ~/^\[27\/Nov\/2008:15:2[0-5]/ {print ...

  8. lr_start_transaction/lr_end_transaction事物组合

    lr_start_transaction/lr_end_transaction事物组合 总结一下: lr_start_transaction与lr_end_transaction 为使用最多的事物创造 ...

  9. 牛客练习赛19 C-托米航空公司

    思路:轮廓线dp,找bug找死我了. #include<bits/stdc++.h> #define LL long long #define fi first #define se se ...

  10. 一个完整的 JS 身份证校验代码

    一个完整的 JS 身份证校验代码 身份证号码是由 18 位数字组成的,它们分别表示: (1) 前 1.2 位数字表示: 所在省份的代码; (2) 第 3.4 位数字表示: 所在城市的代码; (3) 第 ...