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 ...
随机推荐
- 网页查看源码中<div>的含义
代码如下: /** HTML转义 **/ String s = HtmlUtils.htmlEscape("<div>hello world</div><p&g ...
- HDU 2594 Simpsons’ Hidden Talents(KMP求s1前缀和s2后缀相同部分)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2594 题目大意:给两串字符串s1,s2,,找到最长子串满足既是s1的前缀又是s2的后缀,输出子串,及相 ...
- jstat分析JVM内存
zabbix: Jstat:gcutil:Old space utilization(%) S0 — Heap上的 Survivor space 0 区已使用空间的百分比S1 — Heap上的 S ...
- Go语言入门之切片的概念
切片是对数组的抽象,对切片的改变会改变原数组的值 package main import "fmt" func test6(){ arr:=[...],,,,,,,,,,} s1: ...
- jquery li a 样式
jQuery(".CwebtopNavContainer").find("li:last a").css("color","red ...
- 关于IPMI的几个问题
https://blog.csdn.net/lanyang123456/article/details/51712878
- [实战]MVC5+EF6+MySql企业网盘实战(9)——编辑文件名
写在前面 上篇文章实现了文件的下载,本篇文章将实现编辑文件名的功能. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) ...
- docker 解决network has active endpoints
解决方式 使用 docker network disconnect -f {network} {endpoint-name},其中的 {endpoint-name} 可以使用命令 docker net ...
- 《互联网MySQL开发规范》
一.基础规范 使用 INNODB 存储引擎 表字符集使用 UTF8 所有表都需要添加注释 单表数据量建议控制在 5000W 以内 不在数据库中存储图⽚.文件等大数据 禁止在线上做数据库压力测试 禁⽌ ...
- 使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)
序: 上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html) 紧接着上节课的内容 我们这节可来详细讲解机房 ...