JavaScript学习10:动态载入脚本和样式
我们在写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);
- }
通常样式表有两种方式进行载入,一种是<link>标签,一种是<style>标签。
因此给出两种方式的代码演示样例,来说明怎样动态载入样式。
- <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学习10:动态载入脚本和样式的更多相关文章
- JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...
- javascript学习 真正理解DOM脚本编程技术背后的思路和原则
本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...
- js中动态载入css js样式
js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http:/ ...
- 封装实现JavaScript 文件的动态载入功能
function loadScript(url, callback){ var script = document.createElement ("script") script. ...
- javascript学习(10)——[知识储备]链式调用
上次我们简单的说了下单例的用法,这个也是在我们java中比较常见的设计模式. 今天简单说下链式调用,可能有很多人并没有听过链式调用,但是其实只要我简单的说下的话,你肯定基本上都在用,大家熟知的jQue ...
- 第一百一十八节,JavaScript,动态加载脚本和样式
JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...
- JavaScript的DOM_动态加载脚本和样式
一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们 ...
- Extjs学习----------动态载入js文件(减轻浏览器的压力)
动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...
- JavaScript学习(5)-Image对象和动态HTML
JavaScript学习5 1.image 对象 对象引用 document.images[n] document.images["imageName"] document.ima ...
随机推荐
- kvm安装准备
到实际情况下,做虚拟化是直接做在真机上. 但实验时,可以在虚拟机上进行.(因为做实验的时候没办法连接到桥接模式的网络,所以使用了NAT方式来连接网络) 在vmware安装centos 64bit fo ...
- group by的运用
select a.* from zeai_photo a inner join (select max(id) mid,userid from zeai_photo group by userid) ...
- POJ 3159 Candies(差分约束+spfa+链式前向星)
题目链接:http://poj.org/problem?id=3159 题目大意:给n个人派糖果,给出m组数据,每组数据包含A,B,C三个数,意思是A的糖果数比B少的个数不多于C,即B的糖果数 - A ...
- Java容器---Arrays & Collections工具类
1.Array & Arrays 与Collection & Collections区别 (1)Collection": 是一个接口,与其子类共同组成一个Collection ...
- day4装饰器
Python装饰器 1.必备 def foo(): print(foo) <function foo at 0x7f62db093f28> >>> foo <fun ...
- 【LOJ】 #2520. 「FJOI2018」所罗门王的宝藏
题解 发现似乎相当于问一个2000个元的方程组有没有解-- 然而我懵逼啊-- 发现当成图论,两个点之间连一条边,开始BFS,每个点的值赋成边权减另一个点的点权 如果一个环不合法那么肯定无解 代码 #i ...
- 性能测试常用的linux命令
性能测试常用的linux命令 linux测试nginx64bitredhatlighttpd 查看日志 awk '$4 ~/^\[27\/Nov\/2008:15:2[0-5]/ {print ...
- lr_start_transaction/lr_end_transaction事物组合
lr_start_transaction/lr_end_transaction事物组合 总结一下: lr_start_transaction与lr_end_transaction 为使用最多的事物创造 ...
- 牛客练习赛19 C-托米航空公司
思路:轮廓线dp,找bug找死我了. #include<bits/stdc++.h> #define LL long long #define fi first #define se se ...
- 一个完整的 JS 身份证校验代码
一个完整的 JS 身份证校验代码 身份证号码是由 18 位数字组成的,它们分别表示: (1) 前 1.2 位数字表示: 所在省份的代码; (2) 第 3.4 位数字表示: 所在城市的代码; (3) 第 ...