手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >script的async属性以非阻塞的模式加载脚本
script的async属性以非阻塞的模式加载脚本
摘要:1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性...

1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始就支持些属性。

复制代码 代码如下:

//async

<script async src="dquery.js" async></script>

//defer

<script async src="dquery.js" defer>

</script>

2.async和defer的区别:

带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作。它的不同之处在于async一旦下载完成就立即执行(在window.onload事件之前),不确保执行的顺序,而defer能确保js是在按照其在页面中的顺序执行(在DOMContentLoaded事件之前)。

3.为了解决浏览器兼容问题可以使用下面的代码进行处理

复制代码 代码如下:

function lazyload() {

var elem = document.createElement("script");

elem.type = "text/javascript";

elem.async = true;

elem.src = "js/dquery.js?v=11"; //对应的JS文件

document.body.appendChild(elem);

}

if (window.addEventListener) {

window.addEventListener("load", lazyload, false);

} else if (window.attachEvent) {

window.attachEvent("onload", lazyload);

} else {

window.onload = lazyload;}

由于是异步加载所以使用相应js内容就需要在window.onload事件中使用,直接写在页面中会报脚本错误,如:

script的async属性以非阻塞的模式加载脚本1

【script的async属性以非阻塞的模式加载脚本】相关文章:

jQuery使用zTree插件实现树形菜单和异步加载

JavaScript获得url查询参数的方法

javascript实现dom动态创建省市纵向列表菜单的方法

javascript实现Table排序的方法

JavaScript获得指定对象大小的方法

javascript动态创建链接的方法

javascript原型模式用法实例详解

Javascript的IE和Firefox兼容性汇编

javascript结合Flexbox简单实现滑动拼图游戏

html代码调试脚本

精品推荐
分类导航