HTML中Intersection Observer实现图片懒加载的完整代码-html教程-PHP中文网

intersection observer 是浏览器原生异步 api，用于监听元素是否进入视口；它不阻塞主线程、不触发重排、支持 rootmargin 提前加载，且仅在 isintersecting 为 true 时精准触发，天然适配图片懒加载“按需加载”核心诉求。

html中intersection observer实现图片懒加载的完整代码

Intersection Observer 是什么，为什么适合图片懒加载

它不是轮询或 scroll 事件的替代品，而是浏览器原生提供的异步监听元素是否进入视口的机制。相比 scroll + getBoundingClientRect()，它不触发重排、不阻塞主线程、支持根容器偏移（rootMargin），且能精确控制触发时机。

懒加载的核心诉求是：图片真正要被用户看到时才请求资源。Intersection Observer 天然匹配这个逻辑——只有当 isIntersecting === true 时才开始加载。

如何用 Intersection Observer 绑定 img 标签并加载真实 src

关键在于把占位图（如 data-src）延迟赋给 src，并在进入视口后触发加载。注意：必须在回调中检查 isIntersecting，否则离开视口时也会触发（比如滚动过快导致短暂触发又离开）。

给所有待懒加载的 <img> 添加 data-src 属性，src 可设为空或指向 1×1 占位图
创建 IntersectionObserver 实例，配置 rootMargin: '50px' 提前 50px 开始加载，避免滚动停顿导致白屏
在 callback 中遍历 entries，对每个 entry.isIntersecting === true 的元素，取 entry.target.dataset.src 赋值给 src，然后调用 observer.unobserve(entry.target) 防止重复触发

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;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '50px' });

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

常见错误：图片加载失败后不降级、未处理 loading 状态、重复 observe 同一元素

实际项目中，img.src 赋值后可能 404 或网络中断，此时页面留白。同时，用户快速滚动可能让同一张图多次进入/离开视口，若没调用 unobserve，会反复尝试加载。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

务必在 img.onload 和 img.onerror 中做状态清理：成功则移除 data-src；失败可 fallback 到默认图或加 class 标记
不要在 callback 外直接操作 DOM 属性，比如提前写 img.src = ''，这会触发浏览器预加载行为，反而绕过懒加载
如果 img 是动态插入的（如分页加载），需在插入后手动调用 observer.observe(img)，不能只靠初始化时的 querySelectorAll