点评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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
js实现飞机大战小游戏
Aug 26 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python中的asyncio代码详解
2019/06/10 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
python中实现词云图的示例
2020/12/19 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
业务部主管岗位职责
2014/01/29 职场文书
初中校园广播稿
2014/02/02 职场文书
年度考核自我鉴定
2014/02/02 职场文书
大学生个人求职信
2014/06/02 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
师德承诺书2015
2015/04/28 职场文书
学校食堂管理制度
2015/08/04 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
详解Python flask的前后端交互
2022/03/31 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA