点评js异步加载的4种方式


Posted in Javascript onDecember 22, 2015

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="http://images.cnitblog.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="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
    </body>
</html>

点评:兼容所有浏览器。

以上就是针对js异步加载的4种方式进行的区分介绍,希望对大家的学习js异步加载有所帮助。

Javascript 相关文章推荐
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
深入理解js generator数据类型
Aug 16 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
JS模拟按钮点击功能的方法
Dec 22 #Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 #Javascript
js实现仿微博滚动显示信息的效果
Dec 21 #Javascript
Javascript实现Array和String互转换的方法
Dec 21 #Javascript
图解Sublime Text3使用技巧
Dec 21 #Javascript
七个不允许错过的jQuery小技巧
Dec 21 #Javascript
jQuery焦点图插件SaySlide
Dec 21 #Javascript
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
举例说明类变量和实例变量的区别
2016/06/30 面试题
生物专业个人自荐信范文
2013/11/29 职场文书
班队活动设计方案
2014/01/30 职场文书
学习标兵获奖感言
2014/02/20 职场文书
绿色校园广播稿
2014/10/13 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
高中运动会前导词
2015/07/20 职场文书
遗嘱范文
2015/08/07 职场文书
高效课堂教学反思
2016/02/24 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL