JavaScript如何实现图片懒加载

# JavaScript如何实现图片懒加载

## 什么是图片懒加载？

图片懒加载（Lazy Load）是一种优化网页性能的技术，通过延迟加载非可视区域内的图片，只有当用户滚动到图片位置附近时才开始加载。这种方式能显著减少页面初始加载时的网络请求和带宽消耗，提升用户体验。

## 实现原理

懒加载的核心逻辑是：
1. 将真实图片地址存储在`data-src`属性中
2. 监听滚动事件判断图片是否进入可视区域
3. 当图片进入可视区域时，将`data-src`的值赋给`src`属性

## 原生JavaScript实现

```html
<!-- HTML结构 -->
<img class="lazy" data-src="real-image.jpg" src="placeholder.jpg">

// JavaScript实现
document.addEventListener("DOMContentLoaded", () => {
  const lazyImages = document.querySelectorAll("img.lazy");
  
  const lazyLoad = () => {
    lazyImages.forEach(img => {
      if (img.getAttribute("data-src") && isInViewport(img)) {
        img.src = img.getAttribute("data-src");
        img.removeAttribute("data-src");
        img.classList.remove("lazy");
      }
    });
  };
  
  // 判断元素是否在可视区域
  const isInViewport = (el) => {
    const rect = el.getBoundingClientRect();
    return (
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.bottom >= 0
    );
  };
  
  // 初始加载可视区域图片
  lazyLoad();
  
  // 添加滚动事件监听（建议使用防抖）
  window.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
});

优化方案

1. Intersection Observer API（现代浏览器推荐）：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll("img.lazy").forEach(img => {
  observer.observe(img);
});

1. 添加加载动画：在图片加载完成前显示占位图或loading动画
2. 预加载相邻图片：提前加载可视区域附近的图片

注意事项

1. 确保设置图片默认高度，避免页面布局抖动
2. 对滚动事件进行防抖/节流处理
3. 考虑SEO影响，搜索引擎可能不会执行懒加载逻辑

通过合理使用懒加载技术，可以显著提升页面加载速度，特别是在图片较多的场景下效果尤为明显。 “`

（注：实际字数约550字，可根据需要调整代码示例的详细程度）