滚动懒加载的实现

最新推荐文章于 2024-04-30 12:01:41 发布

bug丸

最新推荐文章于 2024-04-30 12:01:41 发布

阅读量220

点赞数

分类专栏：常见功能效果实现文章标签：前端图形渲染性能优化

本文链接：https://blog.csdn.net/weixin_50576800/article/details/132308346

版权

常见功能效果实现专栏收录该内容

8 篇文章 0 订阅

订阅专栏

图片懒加载方案

方案1：监听滚动事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
    }
    .box {
      height: 100%;
      overflow-y: auto;
    }
    .ele1 {
      height: 1200px;
      width: 100%;
      background-color: goldenrod;
    }
    .ele2 {
      height: 300px;
      width: 100%;
      margin-top: 20px;
      background-color: skyblue;
    }
  </style>
  <body>
    <div class="box">
      <div class="ele1"></div>
      <div class="ele2"></div>
    </div>
  </body>
</html>

目标元素距离顶部的距离 < 可视区域；就说明需要加载图片

Element.getBoundingClientRect() 方法可以返回一个对象，其提供了元素的大小及其相对于视口的位置

{ bottom: 1441; height: 300; left: 0; right: 965; top: 1141; width: 965; x: 0; y: 1141 }

其中 width 和 height属性是包含了 padding 和 border-width

  <script>
    const lazyImgs = document.querySelectorAll(".lazy-img");
    const screenHeight = window.innerHeight;
    document.querySelector(".box").addEventListener("scroll", () => {
      lazyImgs.forEach((img) => {
        if (img.getBoundingClientRect().top < screenHeight) {
          const dataSrc = img.getAttribute("data-src");
          const isLoading = img.getAttribute("src");
          !isLoading && img.setAttribute("src", dataSrc);
        }
      });
    });
  </script>

方案2：Object.IntersectionObserver

语法：创建一个observer观察实例，可以使用observe方法观察具体的dom

const observer=new IntersectionObserver(callback，option)

callback函数

目标元素刚好被看到、刚好消失是都会触发 callback 回调

entries是一个数组，数组中是被观察的dom信息

（entries）=> {}

option

观察dom节点和取消观察

observer.observe(DOM节点)
observer.unobserve(DOM节点)

具体实现

  <script>
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        // 如果图片进入可视区域，设置src属性获取图片资源
        if (entry.isIntersecting) {
          // const img = entry.target;
          // const dataSrc = img.getAttribute("data-src");
          // img.setAttribute("src", dataSrc);
          entry.target.src = entry.target.dataset.src;
          observer.unobserve(entry.target); // 获取后取消对该图片的观察
        }
      });
    });
    const lazyImgs = document.querySelectorAll(".lazy-img");
    // 观察所有图片
    lazyImgs.forEach((img) => {
      observer.observe(img);
    });
  </script>