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 ...
随机推荐
- 记一次spring boot中MongoDB Prematurely reached end of stream的异常解决
在spring boot项目中使用了mongodb,当一段时间没有操作mongodb,下次操作mongodb时就会出现异常.异常如下: org.springframework.data.mongodb ...
- <转>MYSQL数据库数据拆分之分库分表总结
数据存储演进思路一:单库单表 单库单表是最常见的数据库设计,例如,有一张用户(user)表放在数据库db中,所有的用户都可以在db库中的user表中查到. 数据存储演进思路二:单库多表 随着用户数量的 ...
- ioctl socket getsockopt
一 ioctl 函数产生原因: 虽然在文件操作结构体"struct file_operations"中有很多对应的设备操作函数,但是有些命令是实在找不到对应的操作函数.如CD-RO ...
- jquery.query.js 插件(示例及简单应用) —— html之间传值
帮助文档 var url = location.search; > "?action=view§ion=info&id=123&debug&te ...
- 为什么可以这么快! awk 与python的应用
这几天刚处理一个排序问题 源文件: 可以看到有11G大小,需要根据最后一列的热度来做一下排序.如果让你来做这样的排序,在linux环境下,你会如何处理呢? xch27@lanzhou:/asrdata ...
- QT构造函数中*parent
程序写的多了,你会发现几乎所有的Qt类的构造函数都会有一个parent参数.这个参数通常是QObject* 或者是 QWidget* 类型的(定义新的类是通常首先初始化为0,在类的实现函数中赋值).很 ...
- Linux-数据库1
数据库介绍 数据库(database,DB)是指长期存储在计算机内的,有组织,可共享的数据的集合.数据库中的数据按一定的数学模型组织.描述和存储,具有较小的冗余,较高的数据独立性和易扩展性,并可为各种 ...
- Python开发基础-Day32 进程间通信、进程池、协程
进程间通信 进程彼此之间互相隔离,要实现进程间通信(IPC),multiprocessing模块支持两种形式:队列和管道,这两种方式都是使用消息传递的. 进程队列queue 不同于线程queue,进程 ...
- ZXing.Net.Mobile无法识别较大的条码
ZXing.Net.Mobile无法识别较大的条码 在Xamarin项目中,使用ZXing.Net.Mobile实现条码扫描时,可能会出现无法顺利识别较大的条码,而可以正常识别较小的条码.这是由于ZX ...
- iOS 9音频应用播放音频之iOS 9音频播放进度
iOS 9音频应用播放音频之iOS 9音频播放进度 iOS 9音频应用开发播放进度 音频文件在播放后经过了多久以及还有多久才可以播放完毕,想必是用户所关注的问题.为了解决这一问题,在很多的音乐播放器中 ...