html5如何实现懒加载图片_ intersectionobserver api用法【教程】_网络技术

图片懒加载的核心判断逻辑是当图片即将进入视口时触发加载，依赖IntersectionObserver监听交叉状态变化，通过threshold和rootMargin精准控制加载时机。

图片懒加载的核心判断逻辑是什么

懒加载不是“等用户滚动到图片位置才加载”，而是“当图片即将进入视口时触发加载”。IntersectionObserver 的本质是监听目标元素与根容器（通常是视口）的交叉状态变化，它不依赖 scroll 事件，因此没有节流、抖动、性能卡顿问题。

关键点在于：它只在元素真正开始进入或离开视口时回调，且可配置 threshold 控制触发时机——比如设为 [0, 0.1] 表示元素顶部刚触达视口底部，或已有 10% 进入视口时就加载。

如何用 IntersectionObserver 加载 `data-src` 图片

典型场景是页面中大量标签用 data-src 存真实地址，占位图用 src 指向小尺寸 base64 或默认灰图。Observer 一旦发现元素“可见”，就将 data-src 赋给 src，并移除监听（避免重复触发）。

必须提前把 data-src 值存在元素上，不能靠 JS 动态拼接 URL，否则无法解耦加载逻辑
加载后建议设置 img.src = img.dataset.src 后立即清空 dataset.src，防止后续 observer 再次误判
加载失败时应 fallback 到占位图，并调用 observer.unobserve(img) 避免无限重试

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.dataset.src;
      if (!src) return;
      img.src = src;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
}, {
  threshold: 0.05 // 提前 5% 进入就加载
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

`rootMargin` 怎么影响懒加载时机

rootMargin 是字符串，类似 CSS margin 语法（如 "0px 0px 200px 0px"），它会扩大或缩小“根容器”的判定边界。对懒加载最常用的是向下扩展：让图片还没真正滚动进视口时就触发加载，避免用户快速滚动时出现白屏或闪烁。

立即学习“前端免费学习笔记（深入）”；

设为 "0px 0px 300px 0px" 表示在元素底部距离视口底部还有 300px 时就开始加载
负值（如 "0px 0px -100px 0px"）会让触发更晚，一般不推荐用于懒加载
如果页面有固定头部遮挡，可用 rootMargin: "60px 0px 0px 0px" 抵消 header 高度，确保图片不被遮住才加载
注意：该值不支持百分比，只能是 px / em / rem 等绝对单位

兼容性差怎么办？要不要降级

IE 完全不支持 IntersectionObserver，Safari 12.1+ 才支持，但大多数现代项目已无需兼容 IE。真要保旧，别写复杂 polyfill——直接降级为 getBoundingClientRect() + scroll 监听即可，仅需几十行代码。

降级方案只需监听 window.onscroll，遍历所有待加载图片，用 el.getBoundingClientRect().top 判断是否进入视口
务必手动节流（如 setTimeout 防抖），否则快速滚动时性能爆炸
移动端要注意 position: fixed 头部/底部导致 getBoundingClientRect 计算偏移异常，需额外减去 fixed 元素高度
绝大多数情况建议直接使用原生 API，通过构建工具（如 Webpack）按需注入 polyfill，而不是在业务代码里混写两套逻辑

真正容易被忽略的是：图片加载完成后，img.naturalWidth === 0 可能持续几十毫秒，此时读取尺寸会出错；如果后续有基于尺寸的布局计算（如 Masonry），得监听 load 事件再执行。

# css # html # js # html5 # 工具 # 懒加载 # safari # win # 卡顿问题 # webpack # 字符串

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251811 】【 AI营销90571 】