17370845950

图片懒加载的核心是按需加载，即初始化时仅加载可视区图片，滚动至附近再加载其余图片，以减少首屏请求、提升渲染速度并节省带宽；关键依赖JavaScript检测元素是否进入视口，推荐使用Intersection Observer API，兼容方案为getBoundingClientRect或节流的scroll监听；实现上用data-src存真实地址、src设占位图，进入视口后替换并停止观察。

图片懒加载的核心是“按需加载”——页面初始化时只加载可视区域内的图片，其余图片等到用户滚动到附近再加载。这样能减少首屏请求、加快渲染速度、节省带宽。

懒加载的关键判断依据：元素是否进入视口

浏览器本身不自动识别“图片是否可见”，需要 JavaScript 主动检测。常用方法有：

• getBoundingClientRect()：获取图片元素相对于视口的坐标（top/bottom/left/right），判断其 top 是否小于视口高度、bottom 是否大于 0；
• Intersection Observer API（推荐）：原生异步监听元素与视口的交叉状态，性能好、写法简洁，无需频繁监听 scroll 事件；
• 手动监听 scroll + throttle：兼容老浏览器，但容易造成卡顿，需节流控制检测频率。

实现步骤：从占位到真实图片替换

懒加载不是“不加载”，而是延迟加载。通常做法是：

• HTML 中用 data-src 存真实图片地址，src 放占位图（如 1×1 透明 GIF 或 base64）；
• JS 检测到图片即将进入视口时，把 data-src 的值赋给 src；
• 可选：加载完成后添加 loaded 类或触发事件，便于加动画或埋点。

一个最小可用的 Intersection Observer 示例

不用第三方库，几行代码就能跑起来：

const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img); // 加载完就停止观察
    }
  });
});

lazyImages.forEach(img => observer.observe(img));

注意几个实际细节

• 移动端要注意 resize 和 orientationchange 可能影响视口，但通常 Intersection Observer 自动响应；
• 图片加载失败时建议 fallback，比如显示错误占位符或重试逻辑；
• SEO 友好提示：服务端渲染或使用 loading="lazy"（原生支持，但兼容性有限，可作为降级补充）。

基本上就这些。原理不复杂，但容易忽略节流、错误处理和兼容策略。