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

        </body>

</html>
 点评：兼容所有浏览器。

异步加载JS的4种方式（详解）的更多相关文章

  1. 黄聪：异步加载JS的4种方式（详解）

    方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://co ...

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

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

  3. 异步加载js的三种方法

    js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

  4. 请给出异步加载js方案

    请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很 ...

  5. 网页性能优化之异步加载js文件

    一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...

  6. Vue加载组件、动态加载组件的几种方式

    https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...

  7. WebView加载页面的两种方式——网络页面和本地页面

    WebView加载页面的两种方式 一.加载网络页面 加载网络页面,是最简单的一种方式,只需要传入http的URL就可以,实现WebView加载网络页面 代码如下图: 二.加载本地页面 1.加载asse ...

  8. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  9. 异步加载js

    //异步加载js function loadScript(url,callback){ var script = document.createElement("script"); ...

随机推荐

  1. HTML 表单和验证事件

    1.表单验证<form></form> (1)非空验证(去空格) (2)对比验证(跟一个值对比) (3)范围验证(根据一个范围进行判断) (4)固定格式验证:电话号码,身份证号 ...

  2. spring security 匿名登录

    匿名登录,即用户尚未登录系统,系统会为所有未登录的用户分配一个匿名用户,这个用户也拥有自己的权限,不过他是不能访问任何被保护资源的. 设置一个匿名用户的好处是,我们在进行权限判断时,可以保证Secur ...

  3. BizTalk 开发系列(四十二) 为BizTalk应用程序打包不同的环境Binding

    我们在使用微软或者其他公司提供的BizTalk应用程序MSI包的时候经常会有一个目标环境的选择选项.该选项可以在不同的环境下使用不同的绑定(BizTalk应用程序配置)感觉很高级. 其实这个非常的简单 ...

  4. 【转】Linux安装方法一（U盘引导）

    Ubuntu 13.04正式版已经在4月25日发布了,相信很多人和我一样很想安装体验一下,但是现在的Ubuntu 13.04文件已经是794M,但是很难刻录到一张CD中,所以采用U盘启动安装Ubunt ...

  5. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  6. ExtJS笔记 Tree

    The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool ...

  7. 奥迪--S5

    --型号:S5 --生产:奥迪进口 --价格:60-80W --发动机:3T 333马力 V6,机械增压 --变速箱:7档双离合 --气缸排列:V --总部:德国,英戈尔施塔特 --类型:中型车 -- ...

  8. controlling the variance of request response times and not just worrying about maximizing queries per second

    http://highscalability.com/blog/2010/11/4/facebook-at-13-million-queries-per-second-recommends-minim ...

  9. Bootstrap 弹出框和警告框插件

    一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器. //基本用法 <button class="btn btn-lg btn-danger" type=" ...

  10. java中类的创建及初始化过程

    java中类的创建及初始化过程无外乎两种情况,其一为单类的创建及初始化,其二具有继承关系的父子类创建及初始化过程.     首先说简单的,单类的创建及初始化过程.在java中我们都知道绝大部分对象的创 ...