点评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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
Vue 幸运大转盘实现思路详解
May 06 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 默默经典版本
2009/08/04 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
用Python解决x的n次方问题
2019/02/08 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
提升Python程序性能的7个习惯
2019/04/14 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
什么是lambda函数
2013/09/17 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
房地产项目建议书
2014/03/12 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
用JS创建一个录屏功能
2021/11/11 Javascript