js前端实现图片懒加载的步骤

在JavaScript前端中实现图片懒加载（Lazy Loading），通常是为了优化网页性能，避免一次性加载所有图片导致页面加载速度变慢。以下是简单的步骤：

1. **HTML结构设置**：在需要延迟加载的图片元素上添加`data-src`属性，将实际的src设为空或者占位符，如`<img data-src="真实图片URL" alt="描述">`。

<img data-src="image.jpg" alt="懒加载示例">

2. **事件监听**：在浏览器窗口滚动到图片所在位置附近时，通过添加`Intersection Observer API`（或老版本的`window.onload`、`scroll`事件监听器）来检测图片是否进入视口。

function lazyLoad() {
  const images = document.querySelectorAll('img[data-src]');
  let observer;

  function observeImages(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        // 可以移除观察者，防止无谓的计算
        observer.unobserve(entry.target);
      }
    });
  }

  observer = new IntersectionObserver(observeImages, { threshold: 0.5 }); // 设置阈值，当图片进入视图50%时触发
  images.forEach(observer.observe);
}

// 当文档准备好时启动懒加载
window.addEventListener('DOMContentLoaded', lazyLoad);
window.addEventListener('scroll', lazyLoad);

3. **优化**：考虑对图片预加载一部分，可以利用`preload`属性或在视窗顶部显示一个占位图片，用户滚动前先下载一部分资源。

4. **兼容性处理**：检查并确保所使用的API在目标浏览器上是可用的，如`Intersection Observer`在较旧的浏览器可能不支持，这时可以用其他库（如`lazysizes`）做替代。