黑马程序员技术交流社区

标题: 【上海校区】js延迟加载的三种方式 [打印本页]

作者: 阿莱 时间: 2019-6-26 14:34
标题: 【上海校区】js延迟加载的三种方式

【上海校区】js延迟加载的三种方式

前言：

我们在给dom对象动态绑定事件的时候，需要通过选择器获取dom节点。但是很多人习惯将<script></script>写在<head></head>中，这样就会造成获取dom节点的时候发生错误，这里需要使js的加载顺序后于dom，一下是三种处理方法：

一、采用window对象的onload事件

这种方式是我们最常用的一种方法，它的作用是当页面加载完成之后中执行<script></script>中的代码。

案例演示：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>myDemo1</title>

    <script type="text/javascript">



        window.onload = function () {



            document.getElementById("myBtn").onclick = function () {



                var myApp = document.getElementById("app");



                myApp.innerHTML = "这是一个div";

            }



        }



    </script>



</head>

<body>

    <div id="app"></div><br>

    <button id="myBtn">点我</button>

</body>

</html>

二、采用<script>标签的defer属性

案例演示：
myDemo1.js：

[JavaScript] 纯文本查看 复制代码

document.getElementById("myBtn").onclick = function () {

    var myApp = document.getElementById("app");



    myApp.innerHTML = "这是一个div";

}

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>myDemo1</title>

    <script src="../js/myDemo1.js" defer="defer"></script>



</head>

<body>

    <div id="app"></div>

    <button id="myBtn">点我</button>

</body>

</html>

三、采用<script>标签的async属性

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async 属性。<script>标签的async属性可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效。

注意：Internet Explorer 9 及之前的版本不支持 <script> 标签的 async 属性。

案例演示：
myDemo1.js：

[JavaScript] 纯文本查看 复制代码

document.getElementById("myBtn").onclick = function () {

var myApp = document.getElementById("app");



myApp.innerHTML = "这是一个div";

}

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>myDemo1</title>

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



</head>

<body>

    <div id="app"></div>

    <button id="myBtn">点我</button>



</body>

</html>

小结：
async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。缺点：不能控制加载的顺序

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2