图片懒加载 | 青训营笔记

这是我在青训营班会的时候老师分享面试心得的时候提及的常考题目，老师没有细讲，这里总结一下方便复习。

什么是图片懒加载

图片懒加载是一种前端页面优化的方式。原理是将页面中的img标签src指向一张小图片或者src为空，然后定义data-src属性指向真实的图片。当图片进入可视区域时，再给src赋值，这样就能实现图片的按需加载，也就是懒加载了。这种方式可以减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

图片懒加载的优缺点

• 优点：可以减少初始页面加载的图片数量，提升页面加载速度，提高用户体验。

• 缺点：需要监听图片是否显示，比较耗游览器性能。图片是显示时才去加载，对网络有一定的要求，网络差时会有一段空白。

应用场景

图片懒加载一般用于网页中延迟加载图像，用户滚动到它们之前，可视区域外的图像不会加载，因此图片懒加载适用于大型图片资源场景，即需要大量图片资源的或者图片占用内存较大，常见于电商网站或者视频电影网站等，因为这些网站需要大量的图片来说明商品，影视等。

代码实现

// 获取所有需要懒加载的图片元素
let lazyImages = document.querySelectorAll('img[data-src]');

// 监听滚动事件
window.addEventListener('scroll', lazyLoad);

function lazyLoad() {
  // 遍历所有需要懒加载的图片元素
  for (let img of lazyImages) {
    // 判断图片是否在可视区域内
    if (img.getBoundingClientRect().top < window.innerHeight) {
      // 将自定义属性中的地址赋值给 src 属性
      img.src = img.getAttribute('data-src');
      // 移除自定义属性，避免重复加载
      img.removeAttribute('data-src');
    }
  }
}

这段代码首先获取了所有需要懒加载的图片元素，然后监听了滚动事件。在滚动事件的回调函数中，遍历所有需要懒加载的图片元素，判断图片是否在可视区域内。如果在可视区域内，就将自定义属性中的地址赋值给 src 属性，达到懒加载效果。