html 懒加载图片实现方法

news2024/9/22 7:40:00

懒加载逻辑

一般如果场景比较大，滚动条很长，图片比较多的情况下，不使用赖加载图片会一下子把资源都加载，导致性能很慢，甚至没有滚动到下面也加载了，很浪费资源
现在通过滚动事件来处理图片加载,我们先吧要显示的图片src数据放到自定义属性上data-src
后面通过滚动事件把可见的区域的图片src赋值上去

效果图

在这里插入图片描述

一开始就加载当前内容信息

继续往下面滚动才加载

在这里插入图片描述

代码

<!DOCTYPE html>
<style>
  .container {
    height: 300px;
    width: 300px;
    overflow: auto;
  }

  .image {
    width: 100%;
    height: 100px;
    margin: 10px 0;
  }

</style>

<body>
  <div class="container"></div>
</body>

</html>
<script>
  const dom = document.querySelector('.container')
  for (let i = 0; i < 10; i++) {
    /** 动态创建img标签 使用随机图片api */
    const img = document.createElement('img')
    img.setAttribute('data-src', `https://api.yimian.xyz/img?i=${i}`)
    img.className = 'image'
    dom.appendChild(img)
  }

  let list = document.querySelectorAll('.image')

  /** 滚动事件 */
  const handleScroll = () => {
    for (let i = 0; i < list.length; i++) {
      var rect = list[i].getBoundingClientRect();
      /** 当滚动到对应的每个图片才把src赋值进去 */
      if (dom.scrollTop > rect.top) {
        list[i].src = list[i].getAttribute('data-src')
      }
    }
    /** 当每个图片的src都有赋值就把滚动事件移除 */
    if ([...list].every((item) => {
      return item.src
    })) {
      dom.removeEventListener('scroll',handleScroll)
    }
  }

  // 处理滚动下滑逻辑显示
  dom.addEventListener('scroll',handleScroll)



  // 处理当前图片显示，意思是显示一开始滚动区域的图片
  for (let i = 0; i < list.length; i++) {
    var rect = list[i].getBoundingClientRect();
    if (dom.clientHeight > rect.top) {
      list[i].src = list[i].getAttribute('data-src')
    }
  }

</script>