前端
关于我
前端
关于我

图片懒加载实现

原理就是我们首先给图片一个默认的占位符，而真实的图片地址存储在 data-src 中，当图片位于可视窗口内时，将图片的 src 的值替换成 data-src 中的地址。

<img src="default.jpg" data-src="1.jpg"  alt="1.jpg"/>

使用 scrollTop 实现

const imgs = document.getElementsByTagName('img');

lazyload();

function lazyload() {
  const viewHeight = document.documentElement.clientHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  Array.from(imgs).forEach(img => {
    if (img.offsetTop < scrollTop + viewHeight) {
      img.src = img.getAttribute('data-src');
    }
  });
}

// 这里强烈建议使用节流
window.addEventListener('scroll', throttle(lazyload, 200));

使用 getBoundingClientRect 实现

const imgs = document.getElementsByTagName('img');

lazyload();

function lazyload() {
  const viewHeight = document.documentElement.clientHeight;

  Array.from(imgs).forEach(img => {
    if (img.getBoundingClientRect().top < viewHeight) {
      img.src = img.getAttribute('data-src');
    }
  });
}

// 这里强烈建议使用节流
window.addEventListener('scroll', throttle(lazyload, 200));

使用 IntersectionObserver 实现

const imgs = document.getElementsByTagName('img');

const observer = new IntersectionObserver(
  changes => {
    changes.forEach(change => {
      if (change.isIntersecting) {
        const target = change.target;
        target.src = target.getAttribute('data-src');
        observer.unobserve(target); // 移除监听已经加载的图片
      }
    });
  },
  { rootMargin: '0px 0px 100px 0px' } // 指定距离视口多少距离时就加载图片
);

Array.from(imgs).forEach(img => observer.observe(img));