异步加载JS的4种方式（详解）
方案1：$(document).ready
<!DOCTYPE html>
<html>
<head>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("加载完成！");
});
</script>
</head>
<body>
<img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
点评：
1、需要引用jquery
2、兼容所有浏览器。
方案2：<script>标签的async="async"属性
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。
<script type="text/javascript" src="xxxxxxx.js" async="async"></script>
点评：
1、HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。
2、async 属性仅适用于外部脚本（只有在使用 src 属性时）。
方案3：<script>标签的defer="defer"属性
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行 方案4：动态创建<script>标签
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName('script')[0];
tmp.parentNode.insertBefore(s, tmp);
})();
</script>
</head>
<body>
<img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
点评：兼容所有浏览器。
异步加载JS的4种方式（详解）的更多相关文章
- 黄聪：异步加载JS的4种方式（详解）
方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://co ...
- 异步加载js的3种方式
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
- 请给出异步加载js方案
请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很 ...
- 网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
- Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...
- WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一.加载网络页面 加载网络页面,是最简单的一种方式,只需要传入http的URL就可以,实现WebView加载网络页面 代码如下图: 二.加载本地页面 1.加载asse ...
- JavaScript判断图片是否加载完成的三种方式
JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...
- 异步加载js
//异步加载js function loadScript(url,callback){ var script = document.createElement("script"); ...
随机推荐
- linux下mysql的忘记root密码的解决办法
因为放寒假家里没有宽带,便很少上网,前几天用手机进入自己的个人博客时竟然返回数据库不能连接的错误,吓我一跳,网站肯定被人黑了,但转头一想我的博客就几篇破文章,谁这么无聊要黑,我并没有立刻去网上找解决的 ...
- 面向对象static静态的属性和方法的调用
<?php header("content-type:text/html;charset=utf-8"); class Human{ static public $name ...
- POM.xml的配置实例
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 20145334实验三《敏捷开发与XP实践》
实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步骤 1.敏捷开发与XP 敏捷开发(Agile Dev ...
- 【转】统计模型-n元文法
在谈N-Gram模型之前,我们先来看一下Mrkove假设: 1.一个词的出现仅仅依赖于它前面出现的有限的一个或者几个词: 2.一个词出现的概率条件地依赖于前N-1个词的词类. 定义 N-Gram是大词 ...
- Ceph与OpenStack的Glance相结合
http://docs.ceph.com/docs/master/rbd/rbd-openstack/?highlight=nova#kilo 在Ceoh的admin-node上进行如下操作: 1. ...
- 【iCore3 双核心板】例程三十一：HTTP_IAP_FPGA实验——更新升级FPGA
实验指导书及代码包下载: http://pan.baidu.com/s/1gdYnQGN iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- php的乱码问题
$content=file_get_contents("http://www.ctsdc.com/");$pattern="/<a\s+href=.*<\/a ...
- 10/12 study
[患者版]加号选择页: 这是四个TableView放在Scrollview上 上面是个xib封装的view 整体就是个scrollView,用xib摆上去的控件: 上面加了黄条,旧的控件统一修改y ...
- chomre常用快捷键
Ctrl+T 打开新标签页. 按住 Ctrl 键的同时点击链接.或用鼠标中键(或鼠标滚轮)点击链接. 从后台在新标签页中打开链接. ...