主要介绍了点评js异步加载的4种方式，帮助大家更全面的了解js异步加载方式，感兴趣的小伙伴们可以参考一下

js异步加载的4种方式，点评开始。

<!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="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />

    </body>

</html>

方案1：$(document).ready

点评：

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属性的脚本按顺序执行。

<!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="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />

    </body>

</html>

方案4：动态创建

点评：兼容所有浏览器。

以上就是针对js异步加载的4种方式进行的区分介绍，希望对大家的学习js异步加载有所帮助。

------------------------------------------------------------------------------

从另一个html文件中加载一部分内容

点评js异步加载的4种方式的更多相关文章

  1. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  2. js异步加载的5种方式

    方案1:$(document).ready 点评: 1.需要引用jquery 2.兼容所有浏览器. 方案2:<script>标签的async="async"属性 asy ...

  3. js异步加载的3种方式（转载）

    1.defer标签 只支持IE    defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止.有的 javascript 脚本 document.write 方法来创建当前的文 ...

  4. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  5. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...

  6. js异步加载的三种解决方案

    默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...

  7. js页面加载的几种方式的速度： window.onload、 $(window).load、 $(function(){}）、 $(document).ready(function () {})、onload=‘asd（）’

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 转:web前端面试题合集 (Javascript相关)（js异步加载详解）

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  9. route按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

随机推荐

  1. Android PickerView滚动选择器的使用方法

    手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器,前几天用手机刷了MIUI,发现自带的那个时间选择器效果挺好看的,于是就自己仿写了一个,权当练手.先来看效果: 效果还行吧?实现思路就是自定 ...

  2. Linux中硬件相关命令

    http://www.cnblogs.com/cchust/p/3354570.html http://www.cnblogs.com/kerrycode/archive/2012/07/06/257 ...

  3. OC面向对象—多态

    OC面向对象—多态 一.基本概念 多态是基于继承的基础之上的,多态可以使得父类的指针指向子类的对象.如果函数或参数中使用的是父类类型,可以传入父类.子类对象,但是父类类型的变量不能直接调用子类特有的方 ...

  4. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  5. Java 找到数组中两个元素相加等于指定数的所有组合

    思路1:可以用hash表来存储数组中的元素,这样我们取得一个数后,去判断sum - val 在不在数组中,如果在数组中,则找到了一对二元组,它们的和为sum,该算法的缺点就是需要用到一个hash表,增 ...

  6. Silverlight/WPF绘制统计图Visifire.dll文件

    官网:http://www.visifire.com/ 一直没找到好的中文文档,希望有的这个的可以发个我! 效果图: 前台代码: <UserControl x:Class="Text_ ...

  7. 如何用VS调试不属于解决方案的EXE和DLL程序

    如果你手里有一个现成的EXE, 以及EXE相关联PDB文件, 还有相关联的CPP文件和H文件. 你如何用VS调试? (当然你可以选择WinDbg.不过这里就讨论VS) 你或许想问我干嘛不从一开始就用V ...

  8. Oracle RAC 11.2.0.4 – RHRL 6.4: DiskGroup resource are not running on nodes. Database instance may not come up on these nodes

    使用DBCA创建新库的时候报错: 查看资源状态: $ crsctl stat res -t ------------------------------------------------------ ...

  9. With as 递归查询

    use TEST create table Provinces ( pro_Id ,), pro_Name nvarchar(), pro_Code nvarchar(), pro_PId int ) ...

  10. nyist 47 过河问题

    http://acm.nyist.net/JudgeOnline/problem.php?pid=47 过河问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 在漆 ...