方案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 function loadScript(url,callback){ var script = document.createElement("script"); ...

  5. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

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

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

  7. angularLoad（用以异步加载js文件）

    angularLoad(用以异步加载js文件) 使用方法: 1.执行命令 下载 lib npm install angular-load --save 2.index.html引用js <scr ...

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

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

  9. phoneGap异步加载JS失败

    现在正在做一个phoneGap项目,安卓平台,有个异步加载JS总是失败,phoneGap也不好调试,一个问题纠结了一下午 最后找了半天,找到了原因,因此写本文记录一下,也顺便帮帮遇到同样问题的人 原因 ...

随机推荐

  1. cnblogs.com的用户体验

    用户体验: 作为博客园的用户,我们觉得博客园的用户体验还是很不错的.但是我们觉得主界面有些混乱,一登录进去太多东西,完全不明白怎么分的类. 评价cnblogs.com的用户体验 1.你是什么样的用户, ...

  2. 软件工程课程作业（三）--四则运算3（C++）

    伙伴链接:http://www.cnblogs.com/haoying1994/ 一.设计思路 在此前程序拥有的功能:加减有无负数,除法有无余数以及算式可定制的功能的基础上,此次程序又添加了算式结果的 ...

  3. 第三课，T语言数据类型（版本TC5.0）

    数据类型 TC综合开发工具里使用的是可变类型,就是在程序执行过程中,TC综合开发工具会自动把数据转换为需要的类型,转换失败会出现相应的提示但是在一些特殊的场景下,是需要做类型强制处理,那么这时就需要使 ...

  4. IE 下加载jQuery

    转:http://www.iitshare.com/ie8-not-use-native-json.html 解决在IE8中无法使用原生JSON的问题   起因 在项目中要将页面上的js对象传给后台, ...

  5. STL学习小结

    STL就是Standard Template Library,标准模板库.这可能是一个历史上最令人兴奋的工具的最无聊的术语.从根本上说,STL是一些"容器"的集合,这些" ...

  6. PCA和Softmax分类比较—Mnist与人脸数据集

    PCA人脸识别中三种方法得到的正确率可达到100% 作为对比,单独使用Softmax回归对人脸40*10*92*112的数据分类正确率为97%. 用PCA对MNIST手写数字10*500*28*28识 ...

  7. C#脱离Halcon编程开发环境使用方法

    在没有安装Halcon开发程序(HDevelop (SSE2))的电脑上面编程,使C#脱离Halcon编程开发环境使用方法,除了按照Halcon与编程环境必须要做的设置步骤外,还需要做如下两个工作: ...

  8. 学习tornado：安全

    http://blog.csdn.net/siddontang/article/details/18053915

  9. 004. 线程间操作无效: 从不是创建控件“textBox1”的线程访问它

    最简单的方法(不推荐): 在窗体构造函数中写Control.CheckForIllegalCrossThreadCalls =false; 为什么不推荐上面的方法: 为避免空间造成死锁, .net f ...

  10. Oracle数据库概述

    Oracle是一种RDBMS(Relational Database Management System 关系型数据库管理系统),是Oracle公司的核心产品. 2009年4月,Oracle并购了Su ...