实现图片的懒加载

Posted on

图片的懒加载原理： 当图片元素出现在屏幕中时，才给图片的 src 赋值对应的链接，去加载对应的图片

  1. scrollTop 和 img.offsetTop 判断

图片加载条件： img.offsetTop < window.innerHeight + document.body.scrollTop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
  <img src="loading.gif" data-src="pic.png" />
  <img src="loading.gif" data-src="pic.png" />
  <img src="loading.gif" data-src="pic.png" />
  <img src="loading.gif" data-src="pic.png" />
  <img src="loading.gif" data-src="pic.png" />
  <img src="loading.gif" data-src="pic.png" />
</div>
<script>
  let imgs = document.querySelectAll("img");
  function lazyLoad() {
    const scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop;
    const winHeight = window.innerHeight;
    for (let i = 0; i < imgs.length; i++) {
      if (imgs[i].offsetTop < scrollTop + winHeight) {
        imgs[i].src = imgs[i].getAttribute("data-src");
      }
    }
    window.onscroll = lazyLoad();
  }
</script>
  1. IntersectionObserver
    使用 IntersectionObserver 监听元素来判断是否出现在视口，当图片出现在视口时，给 img.src 赋值

IntersectionObserver 替代监听 scroll 事件来判断元素是否在视口中，性能更高

图片懒加载示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// html内容
// <img src="./loading.jpg" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
// <img src="./loading.jpg" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">

function observerImg() {
  let imgList = document.getElementsByTagName("img");
  let observer = new IntersectionObserver((list) => {
    list.forEach((item) => {
      // 判断元素是否出现在视口
      if (item.intersectionRatio > 0) {
        item.target.src = item.target.getAttribute("src");
        observer.unobserve(item.target);
      }
    });
  });
  for (let i = 0; i < imgList.length; i++) {
    // 监听每个img元素
    observer.observe(imgList[i]);
  }
}