异步加载 JS 的3种方法

来源：互联网发布：淘宝一周可以买多少次编辑：程序博客网时间：2024/06/02 05:17

网站首页往往是官网的脸,如果千呼万唤始出来的话就会给浏览者一种想死的心理,我上一家公司的经理就曾经给我提到过这个首页加载炒鸡慢的问题,不过很遗憾,当时我并没有想到办法来解决...

方法一

定义和用法:(兼容IE9及以上,主流浏览器)
defer 属性规定当页面加载完成之后,才会执行脚本,严格意义上来讲它并不是异步的,原理是延迟了加载。
defer 属性仅适用于外部脚本,只用在使用src属性时生效

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" defer="defer"></script>

方法二

定义和用法:(兼容所有浏览器)
async 属性规定一旦脚本可用,就会异步的加载。即当页面开始解析时,js就开始加载,同时进行。
async 属性仅适用于外部脚本,只用在使用src属性时生效

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" async="async"></script>

方法三

动态创建script标签（兼容所有浏览器）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>动态创建 script 标签</title><script type="text/javascript">(function(){//创建script标签var att = document.createElement("script");//设置type属性值att.type = "text/javascript";//设置你需要加载jsatt.src = "http://code.jquery.com/jquery-1.7.2.min.js";//获取新创建的script节点var attScript = document.getElementsByTagName("script")[0];//将新建的节点插入到  当前节点的父节点下面已有子节点之前attScript.parentNode.insertBefore(att,attScript);})();</script></head><body></body></html>

效果图如下

希望能够帮到您！

阅读全文

1 0