点评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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
jQuery实现大图轮播
Feb 13 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
javascript中正则表达式语法详解
Aug 07 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中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
JS中setTimeout()的用法详解
2013/04/14 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
python append、extend与insert的区别
2016/10/13 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
使用python计算三角形的斜边例子
2020/04/15 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
sort命令的作用和用法
2012/11/04 面试题
法律系毕业生自荐信范文
2014/03/27 职场文书
股份合作协议书
2014/04/12 职场文书
高中生操行评语大全
2014/04/25 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
学习与创新自我评价
2015/03/09 职场文书