前端如何实现懒加载/图片懒加载

1. 利⽤ Intersection Observer API:

Intersection Observer 是浏览器提供的⼀种异步观察⽬标元素与其祖先或视窗(viewport)交叉状态 的⽅法。使⽤该 API，我们可以知道什么时候元素进⼊或离开视窗，从⽽进⾏相应的处理。

下⾯为⼀个基础的使⽤示例：

// 寻找⻚⾯中需要懒加载的图⽚元素
const images = document.querySelectorAll('.lazy-load');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    // 当图⽚元素进⼊视窗时，开始加载
    if (entry.isIntersecting) {
      const img = entry.target;
      // 真实的图⽚地址保存在元素的data-src属性中
      img.src = img.dataset.src;
      observer.unobserve(img); // 加载完后停⽌观察
   }
 });
});
images.forEach(img => observer.observe(img));

2. 利⽤ getBoundingClientRect() ⽅法：

getBoundingClientRect() ⽅法返回元素的⼤⼩及其相对于视⼝的位置，通过这个⽅法，我们可以 判断⽬标元素是否在视窗内，如果在，就开始加载。

  window.addEventListener('scroll', lazyLoad());
  function lazyLoad() {
    const images = document.querySelectorAll('.lazy-load');
    images.forEach(img => {
      if (img.getBoundingClientRect().top <= window.innerHeight) {
        img.src = img.dataset.src;
     }
   });
  }
// 图片地址放在data-src 属性中