方案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. 关于SSH整合中对于Hibernate的Session关闭的问题

    在web.xml的Struts2的配置上面加上 <filter> <filter-name>OpenSessionInViewFilter</filter-name> ...

  2. spring mvc显示图片（个人记录）

    @ResponseBody @RequestMapping(value = {"/",""}, method = RequestMethod.GET, prod ...

  3. Python爬虫学习笔记——豆瓣登陆(三)

    之前是不会想到登陆一个豆瓣会需要写三次博客,修改三次代码的. 本来昨天上午之前的代码用的挺好的,下午时候,我重新注册了一个号,怕豆瓣大号被封,想用小号爬,然后就开始出问题了,发现无法模拟登陆豆瓣了,开 ...

  4. <初级程序员> git 的初级使用

    作为程序员,Git 是一个很好的代码管理工具.Git 是一个版本控制系统,主要的作用就是记录代码的修改过程,有效的追踪文件的变化.当代码出现错误的时候可以很容易的恢复到之前的状态,不管对于个人开发还是 ...

  5. font-size单位换算

    Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7 ...

  6. C#中的预处理指令

    C#中的预处理指令 作为预处理中的一对:#region name ,#endregion可能是大家使用得最多的,我也常用它来进行代码分块,在一个比较长的cs文件中,这么做确实是一件可以让你使代码更清晰 ...

  7. 防止浏览器拦截的window.open新窗口方案

    背景 当前的浏览器为了保证用户体验,在很多场合下禁止了window.open打开新窗口,下面就给出一些方案,最大程度上的实现新窗口打开一个链接. 方案 //打开新链接方法实现 function win ...

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

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

  9. ibm硬件知识点

    ibm http://www-03.ibm.com/systems/storage/disk/storwize_v3700/index.html Current software level: Ver ...

  10. OpenJudge计算概论-配对碱基链

    /*===================================== 配对碱基链 总时间限制: 1000ms 内存限制: 65536kB 描述 脱氧核糖核酸(DNA)由两条互补的碱基链以双螺 ...