点评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 相关文章推荐
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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实现验证码功能
2006/10/09 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
checkbox使用示例
2013/08/23 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
分享6个隐藏的python功能
2017/12/07 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python框架django项目部署相关知识详解
2019/11/04 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
路政管理专业个人自荐信范文
2013/11/30 职场文书
节能宣传周活动总结
2014/05/08 职场文书
环保倡议书50字
2014/05/15 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
老员工辞职信范文
2015/05/12 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书