第二十四节:动态加载JS和动态加载CSS
1、动态加载JS
一般需要用到js,需要将js放到<script></<script>
中,一般script放到页面底部;或者在顶部引入外部js。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/jscript" src="js/flexible.js"></script></head><body></body><script>...</script>
</html>
使用JS的两种方式:
<script type="text/jscript" src="js/flexible.js"></script>
<script></script>
动态加载JS
①创建一个script标签
②将JS代码插入(远程js和文本形式插入两种),远程js会有一个时间差,称之为异步加载;需要callback回调函数,在js加载完成后执行回调方法;文本形式为同步加载,不需要回调方法。
③
什么是同步加载?什么是异步加载?
script的属性,h5新增async异步加载
//设置src,引入外部远程js,此时
function loadJS(url, callback) {var script = document.createElement('script');fn = callback || function() {};script.type = 'text/javascript';//IE 判断js是否执行完成if (script.readyState) {script.onreadystatechange = function() {if (script.readyState == 'loaded' || script.readyState == 'complete') {script.onreadystatechange = null;fn();}};} else {//其他浏览器,判断js是否执行完成script.onload = function() {fn();};}script.src = url;document.getElementsByTagName('head')[0].appendChild(script);
}
loadJS('js/flexible.js',function(){alert(1);
});
//在script内部插入js代码,内联<script>
var scriptM = document.createElement('script');
var jsHtml='var x=1;console.log(x);';
//scriptM.insertAdjacentText('afterbegin',jsHtml);
scriptM.innerHTML = jsHtml;
document.body.appendChild(scriptM);
注意:内联插入文本的写法IE会报错
Element.insertAdjacentText方法
Element.insertAdjacentText方法在相对于当前节点的指定位置,插入一个文本节点;第一个是一个表示指定位置的字符串,第二个是待解析的 HTML 字符串。
第一个参数的四个值:
- beforebegin:当前元素之前
- afterbegin:当前元素内部的第一个子节点前面
- beforeend:当前元素内部的最后一个子节点后面
- afterend:当前元素之后
//<p>Hello World</p>
var p1 = document.getElementsByTagName('p')[0];
p1.insertAdjacentText('beforebegin','标签前面');
p1.insertAdjacentText('afterbegin','标签内部前面');
p1.insertAdjacentText('beforeend','标签内部后面');
p1.insertAdjacentText('afterend','标签后面');
//结果:
//标签前面
//标签内部前面Hello World标签内部后面
//标签后面
加载与阻塞
如果使用src的方式加载js,设置src属性时,浏览器是不会发生请求的,只有当把script标签插入到文档当中(appendChild),插入完成之后浏览器才会下载这个文件,下载完会立即执行;当以字符串的形式插入script标签时,插入后会立即执行。
JS本身是一个阻塞形语言,对HTML而言,在JS下载和执行的时候是阻塞的。这就是为什么要把script标签放到文档底部的原因。如果放到文档顶部,浏览器一行一行解析HTML结构时,解析到script标签时就会停止,下载成功之后再执行,下载时其他都无法加载,只能等待JS的下载,所以称之为阻塞形语言。
动态加载JS时不会阻塞页面,但是执行时还是阻塞的。(这是由于浏览器的渲染造成的)
2、动态加载CSS
使用CSS的两种方式:
<link rel="stylesheet" type="text/css" href="css/newyear2.css">
<style>
...
</style>
注意:两种方式的标签是不同的,一个是link,一个是style;与动态加载JS略有不同
//外联样式
function loadCss(url){var link = document.createElement('link');link.type='text/css';link.rel='stylesheet';link.href=url;document.head.appendChild(link);
}
loadCss('css/newyear.css');
//页面样式
var style = document.createElement('style');
var bCss='.a{font-size:18px;color:#f00;}';
style.innerText=bCss;
document.head.appendChild(style);
动态加载JS与CSS的区别和注意点:
①动态加载JS创建的script标签可以插入到页面中的任何位置;CSS创建的link标签和style标签最好插入到head标签中(以免不同浏览器的解析不同造成不一样的结果)。
②动态加载JS创建的标签均为script标签;动态CSS外联用link标签,内联用style标签。
③JS加载完成之后,运行完成后,相关事件已执行完成,此时删除插入的script标签对整个网页没有任何影响(浏览器的js解释器是靠js解释器来完成的);(CSS的解析靠浏览器的渲染器进行完成)渲染器是一个实时更新的机制,所以删除或者修改会直接影响页面样式。
④动态加载CSS可以直接修改href来实现页面样式的修改,例如一些网站的主题修改,通过切换CSS样式即可实现;但是script修改src是无效的。
第二十四节:动态加载JS和动态加载CSS相关推荐
- Python编程基础:第二十四节 作用域Scope
第二十四节 作用域Scope 前言 实践 前言 在Python中每一个变量都有其自己的生命周期,我们一般将变量分为全局变量与局部变量,全局变量是指在整个代码内部都可以访问到的变量,局部变量是指只有在函 ...
- 大白话5分钟带你走进人工智能-第二十四节决策树系列之分裂流程和Gini系数评估(3)...
第二十四节决策树系列之分裂流程和Gini系数评估(3) 上一节中我们讲解了决策树的数学表达形式,本节的话我们讲解决策树的分裂流程以及分裂条件的评估.我们基于决策树的递归表达式上: ...
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第二十四节:小项目实训《绝命沙滩》
<使用Cocos2d-x 开发3D游戏>系列在线课程 第二十四节:小项目实训<绝命沙滩> 视频地址:http://edu.csdn.net/course/detail/1330 ...
- slim php dd model,第二十四节,TensorFlow下slim库函数的使用以及使用VGG网络进行预训练、迁移学习(附代码)...
在介绍这一节之前,需要你对slim模型库有一些基本了解,具体可以参考第二十二节,TensorFlow中的图片分类模型库slim的使用.数据集处理,这一节我们会详细介绍slim模型库下面的一些函数的使用 ...
- Scala入门到精通——第二十四节 高级类型 (三)
本节主要内容 Type Specialization Manifest.TypeTag.ClassTag Scala类型系统总结 在Scala中,类(class)与类型(type)是两个不一样的概念. ...
- 【java】兴唐第二十四节课
HashMap中put函数的源码分析: (一)知识点: 1.方法resize()的作用是扩容 2. if ((p = tab[i = (n - 1) & hash]) == null) 其中n ...
- javascript中动态加载js、vbs脚本或者css样式表
目录:DynamicLoad类简介.属性.方法.事件.示例.下载. DynamicLoad类简介 本文将为您介绍一个在javascript中可以动态加载js.vbs脚本和css样式表的DynamicL ...
- 微信小程序(第二十四章)- 数据交互前置
微信小程序(第二十四章)- 数据交互前置 讲解微信小程序前置的原因 参考文档 理解微信小程序 小程序简介 作用 提问 针对提问--uni-app介绍 小程序和普通网页开发的区别 小程序代码构成 文件个 ...
- matlab的meadian函数_24 第二十四章 时间序列模型_W
<24 第二十四章 时间序列模型_W>由会员分享,可在线阅读,更多相关<24 第二十四章 时间序列模型_W(31页珍藏版)>请在人人文库网上搜索. 1.第二十四章时间序列模型 ...
最新文章
- CSS内置的几个标准的伪类和伪对象
- Java线程的等待与唤醒代码示例
- masm5安装教程_汇编语言程序环境搭建masm+debug64位 win10/7
- 数据库基础系列之一:MySQL账户
- KAFKA SpringBoot2 Nacos 消息异步发送和消费消息(进阶篇)
- java final static
- html5只能django来写if吗,(4)Django学习——模板标签定义及语法:for循环,if判断,页面跳转,开启关闭自动转义,ur...
- Suowei的ajax
- 一道面试题:遇到大规模Oracle坏块该怎么处理?
- Matlab曲线标记间距自定义
- 【爬虫】微博数据采集
- 为什么电脑浏览器打不开网页但微信可以登陆
- zotero导出PDF
- 微型计算机主板常用部件,简明微型计算机组装与维护教程
- Google 谷歌创业训练营2021展示日回顾
- nodejs-指定长度断句
- 华为天才少年:武大94年博士!江山代有才人出,不拘一格降人才!
- Aria2整合FileRun自建离线下载网
- Liunx配置jdk
- 硬盘分区表丢失、修复大事记--分区表修复利器testdisk
热门文章
- git官网下载慢,淘宝镜像地址
- ITU正式把NB-IoT技术纳入5G标准体系
- jstack 线程状态
- VMware 10.0上NetBSD-1.0的PCI网卡驱动程序
- hal编程 gt911 触摸芯片驱动 ( 枚举 结构体 熟用)( 安富莱 f429 4.3寸电容屏 )
- winxpsp2 mdac 2.8 安装问题[摘]
- centOS 环境 安装redis方法
- Flutter报错BlocProvider.of() called with a context that does not contain a Bloc of type **.
- error MSB4018 “CL”任务意外失败
- php 冒泡排序详解非常详细