点评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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
Javascript注入技巧
Jun 22 Javascript
最短的IE判断代码
Mar 13 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 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页面实现定时跳转的方法
2014/10/31 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
python局部赋值的规则
2013/03/07 Python
python放大图片和画方格实现算法
2018/03/30 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
柯基袜:Corgi Socks
2017/01/26 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
GWT都有什么特性
2016/12/02 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
单位实习介绍信
2015/05/05 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA