方案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. 我爱记单词（iWords）之NABC by张恿

    1) N (Need 需求) 我们组的项目是做一个英语学习助手,前人的基础上开发新的功能,修改原来功能的bug等等.之前的版本只提供了主动“看单词”和单词测试的功能,我们希望增加背单词的功能,以便更好 ...

  2. 演示一个导致ora-01555错误的场景

    1创建一个undo表空间 2查看当前undo配置 3更该默认undo表空间 4确认更改的配置 5创建一张测试表 6模拟批量操作 7 查询2分钟前的数据 从这里可以到当查询2分钟前的数据时候,系统报出O ...

  3. purge mysql自带命令清除binlog

    #!/bin/bash DATAUSER=root DATAPASS=shiyiwen DAY=$1 if [ ! $# == 1 ];then echo -e "\033[32m USAG ...

  4. service mysql start出错，mysql启动不了，解决mysql: unrecognized service错误

    service mysql start出错,mysql启动不了,解决mysql: unrecognized service错误的方法如下: [root@ctohome.com ~]# service ...

  5. 测试的程序 test.php，保存放IIS的根目录下

    IIS+PHP的配置的方法,试过之后很多都不能达到效果.于是总结了大部分的文章后就得出了这样的方法 一.下载必须的程序:(1) 先到PHP的官方网站下载一个PHP(本文就以PHP 4.4.2为例).网 ...

  6. js去除中间空格

    / 功能: 1)去除字符串前后所有空格 // 2)去除字符串中所有空格(包括中间空格,需要设置第2个参数为:g) function Trim(str,is_global) { var result;  ...

  7. Windows7无法访问(远程登录)Windows 2003共享问题解决

    解决方法: 1.直接按下win+r键,输入gpedit.msc,打开本地组策略编辑器. 2.找到“计算机配置”-->“Windows设置”-->“安全设置”-->“本地策略”--&g ...

  8. 使用eclipse开发servlet

    package cn.itcast; import java.io.IOException; import javax.servlet.GenericServlet; import javax.ser ...

  9. DataGridView key points

    Simple Examples => http://csharp.net-informations.com/datagridview/csharp-datagridview-readonly-c ...

  10. HTML问题集锦及笔记

    1.<html>和<body>之间的输出? 加入<p>or<script>均可正常运行 2.<br />换行,用<br>< ...