方案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. ZOJ 1151 Word Reversal

    原题链接 题目大意:给一句话,把每个单词倒序,然后输出. 解法:我是用了一个堆栈,以空格来拆分单词,把每个字母压入堆栈,然后依次输出. 参考代码: /* * 字符串反向,140ms,188kb * 单 ...

  2. makefile--目录搜索（八）

    在一个较大的工程中,一般会将源代码和二进制文件(.o 文件和可执行文件)安排在不同的目录来进行区分管理.这种情况下,我们可以使用 make 提供的目录搜索依赖文件功能(在指定的若干个目录下自动搜索依赖 ...

  3. apache开启url rewrite模块

    在把服务器数据转移到本地服务器之后,本地打开首页出现排版紊乱等问题,经过大神指点说是url rewrite的问题. 本篇文章主要写怎样开启apache的url rewrite功能. 打开Apache2 ...

  4. IOS中打开应用实现检查更新的功能

    //检查更新页面 - (void)Renew{        NSDictionary *infoDic = [[NSBundle mainBundle]infoDictionary];        ...

  5. 编码规范（一）之Code Templates的设置（转）

    编码规范(一)之Code Templates的设置 基于公司的主流开发工具为eclipse,但每个人都有自己的编码习惯,为了统一格式,这里通过三个方面:设置Code Templates.Checkst ...

  6. LESS中文版函数手册

    LESS是一种由Alexis Sellier设计的动态层叠样式表语言.LESS 做为 CSS 的一种形式的扩展,它并没有减少 CSS 的功能,而是在现有的 CSS 语法之上,添加了许多其它的功能. 在 ...

  7. RecyclerView使用完全解析

    http://blog.csdn.net/a396901990/article/details/40153759 Android RecyclerView 使用完全解析 体验艺术般的控件 通过这个控件 ...

  8. .net framework4与其client profile版本的区别

    简而言之,client profile版本是完整版本的一个子集.包含大多数最常用的功能并减小了体积,以便更容易的安装和发布,同时还有微软所声称的一些好处,比如因为减少了某些库,所以使其更加安全等等. ...

  9. zookeeper源码学习一——zookeeper启动

    最近正在研究zookeeper,一些心得记录一下,如有错误,还请大神指正. zookeeper下载地址:http://zookeeper.apache.org/releases.html,百度一下就能 ...

  10. Amazon关键词抓取

    亚马逊的网址构造很简单,几乎算是静态的网页,花费3小时完美收工,不要在意细节! 在python3下利用xpath就可以完美解决 xpath的使用方法请见: python之lxml(xpath) 入口图 ...