js资源懒加载

Mu Yoah

已于 2023-03-13 21:41:24 修改

阅读量113

点赞数

文章标签： javascript 前端

于 2023-03-13 19:51:03 首次发布

本文链接：https://blog.csdn.net/weixin_46131005/article/details/129504012

版权

文章介绍了资源懒加载的概念，即在页面内容不可见时不加载，只在接近可视区域时才加载，常用于图片和媒体文件以提升网页性能。提供了两种JavaScript实现方法，一种基于滚动事件，另一种利用getBoundingClientRect方法检测元素位置。

摘要由CSDN通过智能技术生成

什么是资源懒加载？

懒加载就是页面中看不到时，就不去加载它，当页面中快要出现该内容时再去加载，懒加载多用于图片和媒体文件
好处：
好处在于用户看不见的东西就不用使用浏览器去下载了
还可以让页面加载更快提升网页的性能！

以下是两种资源懒加载的方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        height: 800px;
        overflow: auto;
      }

      * {
        margin: 0;
      }
    </style>
  </head>
  <body style="text-align: center">
    <!-- <div class="container" style="border: 2px solid red; position: relative">
      <img src="./img/haizei1.jpg" alt="" data-src="./img/haizei1.jpg" />
      <div style="height: 700px"></div>
      <img src="" alt="" data-src="./img/haizei2.jpg" />
      <div style="height: 700px"></div>
      <img src="" alt="" data-src="./img/haizei3.jpg" />
      <div style="height: 500px"></div>
    </div> -->

    <img src="./img/haizei1.jpg" alt="" data-src="./img/haizei1.jpg" />
    <div style="height: 700px"></div>
    <img src="" alt="" data-src="./img/haizei2.jpg" />
    <div style="height: 700px"></div>
    <img src="" alt="" data-src="./img/haizei3.jpg" />
    <div style="height: 500px"></div>
  </body>

  <script>
    let container = document.querySelector('.container')

    let imgs = document.querySelectorAll('img')
    // 懒加载方式一：
    container.addEventListener('scroll', (el) => {
      console.log()
      imgs.forEach((el) => {
        // 检测是否需要加载该图片
        //      当前元素距离父元素顶部的距离  <  父元素可视区域的高度  +  父元素滚动条滚动的距离
        if (el.offsetTop <= container.clientHeight + container.scrollTop) {
          el.src = el.getAttribute('data-src')
        }
      })
    })

    // 懒加载方式二：
    console.log(imgs[0].getBoundingClientRect())
    window.addEventListener('scroll', () => {
      // console.log(6666, window.scroolTop)

      // getBoundingClientRect 获取对应elment元素距离浏览器窗口各方向的坐标值，top  left  right  bottom
      imgs.forEach((el) => {
        if (el.getBoundingClientRect().top <= window.innerHeight) {
          el.src = el.getAttribute('data-src')
        }
      })
    })
  </script>
</html>