用原生 JS 轻松实现图片懒加载（lazyLoad）优化网页性能

2023-11-23 19:08:31

原生 JS 图片懒加载简介

图片懒加载是一种用于延迟加载图像的技术，仅当用户需要时才加载。这有助于改善网页性能，尤其是在页面包含大量图像时。实现图片懒加载的方法有很多，其中使用原生 JavaScript 是最直接的方式之一。

实现步骤

元素准备

首先，需要在 HTML 代码中为要懒加载的图像添加一个属性，例如：
```
<img src="placeholder.png" data-src="image.png">
```
其中，src 属性指定了占位符图像，而 data-src 属性指定了要懒加载的图像。
监听页面滚动事件

接下来，需要监听页面滚动事件。当用户滚动页面时，会触发该事件。在事件处理程序中，需要检查图像是否可见，如果是，则加载图像。
```
window.addEventListener('scroll', () => {
  lazyLoadImages();
});
```
检查图像是否可见

要检查图像是否可见，可以使用 getBoundingClientRect() 方法。该方法返回一个对象，其中包含图像相对于视口的边界。如果图像的顶部边界小于视口的底部边界，则说明图像可见。
```
function isElementInViewport(element) {
  const rect = element.getBoundingClientRect();
  return rect.top < window.innerHeight;
}
```

加载图像

如果图像可见，则需要加载图像。可以使用 src 属性设置图像的源。

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  for (const image of images) {
    if (isElementInViewport(image)) {
      image.src = image.getAttribute('data-src');
    }
  }
}