当前位置：首页 > article >正文

四、（JS）JS中常见的加载事件

article 2024/11/13 10:18:03

一、文档加载监听

（1）抛出疑惑，什么是文档加载监听？为什么要有这个东西？

老样子，我们先讲一个场景，带着大家熟悉为什么会有文档加载监听，是来解决什么问题来着的。

我们先看下这段代码~

下面这段代码是不是我们可以将boxEl这个元素设置背景为红色？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>

  <div class="box"></div>

  <script>
    var boxEl = document.querySelector(".box")
    boxEl.style.backgroundColor = "red"
  </script>

</body>

</html>

我们看下效果，很明显可以。

我们再把代码位置换一下，这个时候可以设置背景成功吗？

答：很明显不行，因为执行js代码里的时候，还找不到boxEl元素（还没加载）。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>


  <script>
    var boxEl = document.querySelector(".box")
    boxEl.style.backgroundColor = "red"
  </script>

  
  <div class="box"></div>

</body>

</html>

可以解决这个问题吗？答：当然可以，我们只需要将这行代码执行完就可以了。

  <div class="box"></div>

换句话来说，我们只需要把js里面的设置背景相关的代码，写一个事件监听。

（2）文档加载监听 onload

当我们这样子写的时候，function里面的代码不会立即执行，只有等浏览器把全部加载完成过后才会回调这个函数。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>


  <script>

    // 注册事件监听
    window.onload = function () {
      var boxEl = document.querySelector(".box")
      boxEl.style.backgroundColor = "red"
    }

  </script>


  <div class="box"></div>

</body>

</html>

（3）DOMContentLoaded事件

DOMContentLoaded事件是在Web开发中经常使用的事件，它表示当文档的主体内容已经被完全加载并解析完成，但可能还包含一些外部资源如图片、样式表或脚本的异步加载。简单来说，当浏览器完成了HTML标签的解析，并认为页面的主要结构已经就绪时，DOMContentLoaded事件就会触发。

这个事件对于JavaScript开发者很重要，因为它意味着他们可以在DOM树准备就绪之后立即开始操作DOM元素，而不需要等待所有内容下载完毕。这意味着可以避免阻塞用户界面，提升用户体验。例如，你可以在这时候执行某些初始化逻辑或者开始动画效果。

所以如下代码中，img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好不用过多纠结）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>


  <script>

    // 注册事件监听
    window.addEventListener("DOMContentLoaded", function () {
      // 1. 这里可以操作box,box已经加载完毕
      var boxEl = document.querySelector(".box")
      boxEl.style.backgroundColor = "red"
      console.log("HTML内容加载完毕");
    })


    window.onload = function () {
      // var boxEl = document.querySelector(".box")
      // boxEl.style.backgroundColor = "red"
      // console.log("文档中所有资源都加载完毕");
    }

  </script>


  <div class="box">
    <p>哈哈哈哈</p>
  </div>
  <a href="#">百度一下</a>
  <img src="../images/dog.jpg" alt="">

</body>

</html>

（4）window.onload 和 DOMContentLoaded区别

所以从上面2、3点可以得出结论了吧，我们总结一下。

DOMContendLoaded：浏览器已完全加载HTML，并构建了DOM树，但像<img>和样式表之类的外部资源可能尚未加载完成。（img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好不用过多纠结））
load：浏览器不仅加载完成了HTML，还加载完成了所有外部资源：图片，样式等。

（5）验证区别

我在window.addEventListener监听的时候为什么打印不出来img图片占据的宽度和高度？

因为我在img元素里压根没跟他设置style=XXXX

<img src="../images/dog.jpg" alt="">

<img src="../images/dog.jpg" alt="" style="width:200px;height:200px">

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>


  <script>

    // 注册事件监听
    window.addEventListener("DOMContentLoaded", function () {
      // 1. 这里可以操作box,box已经加载完毕
      // var boxEl = document.querySelector(".box")
      // boxEl.style.backgroundColor = "red"
      // console.log("HTML内容加载完毕");

      // 2. 获取img对应图片的宽度和高度
      var imgEl = document.querySelector("img")
      console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);
    })


    window.onload = function () {
      // var boxEl = document.querySelector(".box")
      // boxEl.style.backgroundColor = "red"
      console.log("文档中所有资源都加载完毕");
    }

  </script>


  <div class="box">
    <p>哈哈哈哈</p>
  </div>
  <a href="#">百度一下</a>
  <img src="../images/dog.jpg" alt="">

</body>

</html>

那我们该怎么拿img图片所占据的空间？用 offsetWidth offsetHeight

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>


  <script>

    // 注册事件监听
    window.addEventListener("DOMContentLoaded", function () {
      // 1. 这里可以操作box,box已经加载完毕
      // var boxEl = document.querySelector(".box")
      // boxEl.style.backgroundColor = "red"
      // console.log("HTML内容加载完毕");

      // 2. 获取img对应图片的宽度和高度
      var imgEl = document.querySelector("img")
      // console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);
      console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);
    })


    window.onload = function () {
      // var boxEl = document.querySelector(".box")
      // boxEl.style.backgroundColor = "red"
      console.log("文档中所有资源都加载完毕");
    }

  </script>


  <div class="box">
    <p>哈哈哈哈</p>
  </div>
  <a href="#">百度一下</a>
  <img src="../images/dog.jpg" alt="">

</body>

</html>

我们看下打印结果：说明什么？说明图片压根没加载出来。这个案例是不是验证了：

DOMContendLoaded：浏览器已完全加载HTML，并构建了DOM树，但像<img>和样式表之类的外部资源可能尚未加载完成。（img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好不用过多纠结））

那我们放到window.onload试一下看看。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>


  <script>

    // 注册事件监听
    window.addEventListener("DOMContentLoaded", function () {
      // 1. 这里可以操作box,box已经加载完毕
      // var boxEl = document.querySelector(".box")
      // boxEl.style.backgroundColor = "red"
      // console.log("HTML内容加载完毕");

      // 2. 获取img对应图片的宽度和高度
      // var imgEl = document.querySelector("img")
      // console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);
      // console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);
    })


    window.onload = function () {
      // var boxEl = document.querySelector(".box")
      // boxEl.style.backgroundColor = "red"
      var imgEl = document.querySelector("img")
      console.log("文档中所有资源都加载完毕");
      console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);

    }

  </script>


  <div class="box">
    <p>哈哈哈哈</p>
  </div>
  <a href="#">百度一下</a>
  <img src="../images/dog.jpg" alt="">

</body>

</html>

打印结果如下，是不是验证成功了？

load：浏览器不仅加载完成了HTML，还加载完成了所有外部资源：图片，样式等。