懒加载的实现，运用

zzjwyck

于 2024-10-11 19:29:06 发布

阅读量65

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/zzjwyck/article/details/142861038

版权

图片懒加载的应用场景

懒加载(Lazy-Load)。它是针对图片加载时机的优化

图片懒加载的目的

懒加载的目的是当页面的图片进入到用户的可视范围之内再加载图片的一种优化方式。

图片懒加载的实现原理

图片的加载是由src 引起的，当对src 赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5 的data-xxx 属性来储存图片的路径，在需要加载图片的时候，data-xxx 中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。
注意：data-xxx 中的xxx 可以自定义，这里我们使用data-src 来定义。
懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可

<!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" />
    <!-- 破解图片防盗链 -->
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .list img {
        width: 160px;
        height: 160px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="list">
      <ul></ul>
    </div>
    <script src="./js/flowerData.js"></script>
    <script>
      //获取窗口的高度
      let winHeight = window.innerHeight;
      let ulEl = document.querySelector(".list ul");

      //初始化渲染所有的商品信息
      function init() {
        let html = "";
        flowerData.forEach((item) => {
          html += `<li><a href="#"><p>名称:${item.name}</p><p><img src="./img/img-placeholder.png" alt="" data-src="${item.pic}" class="lazy"></p></a></li> `;
        });
        ulEl.innerHTML = html;
      }
      //初始化显示已经在可视窗口中的图片
      function lazyLoad() {
        let imgList = document.querySelectorAll(".lazy");
        imgList.forEach((pic) => {
          //获取当前图片距离可视窗口顶端的偏移值
          // let offsetTop = pic.getBoundingClientRect().top;
          let offsetTop = pic.offsetTop - document.documentElement.scrollTop;
          if (offsetTop <= winHeight) {
            //说明图片已经在可视窗口
            pic.src = pic.dataset.src;
            pic.classList.remove("lazy")
          }
        });
      }
      init();
      lazyLoad();
      window.addEventListener("scroll", lazyLoad);
    </script>
  </body>
</html>