点评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 iframe内的函数调用实现方法
Jul 19 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
几种tab切换详解
Feb 03 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
Vue实现多标签选择器
Nov 28 Javascript
js+canvas实现画板功能
Sep 13 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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 magic quotes的详解
2013/06/17 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python做接口测试的必要性
2019/11/20 Python
python_mask_array的用法
2020/02/18 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
献爱心倡议书
2014/04/14 职场文书
青春演讲稿范文
2014/05/08 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL