视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5实战与剖析之延迟脚本
2020-11-27 15:13:00 责编:小采
文档


  什么是延迟脚本呢?HTML5实战与剖析之延迟脚本是帮大家解决一些JavaScript加载问题的。有了HTML5实战与剖析之延迟脚本这个功能,我们可以不再为了JavaScript加载而发愁页面加载的时候结构会凌乱了。

  说到JavaScript中的延迟脚本,早在HTML4.01的时候已经有了这样的属性。使用起来很方便,那就是在外部引用的script标签上加一个”defer”属性。加了”defer”属性,就不会影响页面的构造了。也就是说,脚本会加载但是不运行,等到页面全部加载完之后按顺序执行。为了能够更加理解,请看下面的例子。

  在这个例子中,会有a.html文件,这个文件中引用的script标签没有添加延迟脚本的属性,而b.html文件添加了延迟脚本的属性。分别有两个JavaScript文件,分别是a.js和b.js,两个文件中各弹出自己文件的名字,以作示范。

  a.js代码

alert("a");

  

b.js代码

alert("b");

  a.html代码

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>

  b.html代码

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" defer="defer" src="a.js"></script>
<script type="text/javascript" defer="defer" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>

  上面的例子可以看出。虽然我们是在head标签中引用的a.js和b.js,但是由于我们设置了”defer”属性。所以引用的a.js和b.js会加载,只不过得在浏览器遇到标签之后再执行。由于浏览器解析延迟属性不一样,延迟脚本执行的顺序是不一样的。“defer”属性只适用于外部引用JavaScript文件,会忽略其他几种方法引用JavaScript文件的方法。

  支持的浏览器有:IE9、Firefox 3.5、safari 5和chrome。其他不支持的浏览器会像正常一样加载和处理脚本。

下载本文
显示全文
专题