loading="lazy"需配合明确宽高、合法srcset/sizes才生效，失效主因是宽高缺失、父容器transform/overflow、嵌套非img元素、data URI或首屏内图片；srcset应使用w单位+sizes表达式实现真响应；IntersectionObserver需注意data-src分离、rootMargin/threshold设置及及时unobserve。

直接用 loading="lazy" + srcset/sizes + 明确宽高，就能覆盖 95% 场景；手写 IntersectionObserver 只在需要提前加载、兼容老环境或控制非 元素时才值得投入。

为什么 loading="lazy" 加了却没延迟？

浏览器不是“看到 lazy 就懒”，它有一套静默校验逻辑。常见失效原因：

• width 和 height 缺失或仅靠 CSS 设置（如 max-width: 100%）——Safari 会直接降级为 eager
• 父容器用了 transform 或 overflow: hidden，Chrome 会误判滚动根节点，导致 intersection 永远不触发
• 套在 、 或 内部——原生 lazy 不生效
  src 是 data:image/... 占位符或空值——部分浏览器拒绝懒加载，直接报 404
  图片已在首屏内（getBoundingClientRect().top ），浏览器会跳过 lazy 策略，自动 eager 加载

  srcset + sizes 怎么配才真自适应？

  别只写 2x，那是给 DPR 用的，不是给视口宽度用的。真正响应设备条件的是 w 单位 + sizes 表达式：

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载
  • sizes 必须描述“这张图在不同视口下占多宽”，比如 sizes="(max-width: 768px) 100vw, 50vw"，不能只写 "100vw"
  • srcset 中每个选项必须带 w 单位（如 photo-400w.jpg 400w），浏览器才能结合 sizes 和设备 DPR 自动选最省流量的版本
  • CDN 动态图（如 /img?id=123&w=800）也能进 srcset，但所有 URL 必须真实可访问且返回尺寸准确的图，否则 fallback 会失败
  • 关键首屏图（如 banner 主图）要显式加 loading="eager"，否则可能被预加载策略误延迟

  IntersectionObserver 手动控制时最容易错哪？

  它不是“更高级的 lazy”，而是换了一种控制权归属：从浏览器调度变成你自己调度。几个硬性注意点：

  • 真实 URL 必须存在 data-src，不能直接写死在 src —— 否则未监听前就已发请求
  • rootMargin: "0px 0px 200px 0px" 比默认值更实用，向下扩展 200px 提前加载，避免快速滚动时白屏
  • threshold: 0.01（1% 可见即触发）比 0 更可靠，尤其对小图或窄容器
  • 回调里必须立刻调用 observer.unobserve(img)，否则重复触发、内存泄漏、加载两次都可能发生
  • SSR 场景下 hydrate 前要手动检查是否已在视口内，否则首次渲染就错过加载时机

  最常被忽略的其实是组合边界：比如 loading="lazy" 和 srcset 一起用时，如果 sizes 写错，浏览器可能选错资源再懒加载，结果既没省流量又没提体验；而用 IntersectionObserver 时若忘了清空 data-src 或没处理加载失败，用户看到的就是永久占位符。这些细节不在 API 文档里，但在真实页面里天天发生。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！