不推荐广告图加 loading="lazy"，因其触发时机不可控易致广告错过曝光；应改用 IntersectionObserver 提前加载，并配合 decoding="async" 避免解码卡顿。
广告图加 loading="lazy" 通常不推荐
广告图片绝大多数属于非首屏但高优先级资源，浏览器原生 loading="lazy" 的触发时机不可控，容易导致用户滑到广告位时才开始请求——此时广告已错过曝光窗口，甚至因超时未加载而空显。尤其在信息流、侧边栏或底部 banner 场景中，loading="lazy" 带来的延迟常直接降低 CPM 和填充率。
必须懒加载广告图时，只对「滚动后才出现」的长尾广告位用
若广告由 JS 动态插入（如竞价后返回的第三方 iframe 或 img），且明确位于第 3 屏之后（例如瀑布流第 20 条之后的插帧广告），可谨慎启用懒加载。但需满足：
- 广告容器有固定
height和width（不能靠 CSS aspect-ratio 或 % 计算） - 父级无
transform、overflow: hidden或visibility: hidden—— 否则 Chrome/Safari 可能永远不触发 -
src必须为真实 URL，不能留空或仅设data-src；否则广告 SDK 可能无法正确上报曝光 - 禁用
srcset或确保sizes静态可解析（动态 JS 注入的sizes值会被忽略）
更稳妥的做法：用 IntersectionObserver 主动控制广告加载时机
广告系统需要确定性，而非依赖浏览器默认行为。推荐用 IntersectionObserver 提前 150–300px 加载，并与广告 SDK 协同：
- 初始
src设为 1×1 透明 GIF，data-ad-src存真实地址 - Observer 配置
{ rootMargin: "0px 0px 200px 0px", threshold: 0.1 }，保证进入视口前就发起请求 - 回调中先调
adSdk.trackImpression()（如有），再赋值img.src = img.dataset.adSrc - 加载失败时 fallback 到备用尺寸图或隐藏该广告位，避免留白影响布局
特别注意：iframe 广告不能只靠 loading="lazy"
很多广告以 形式嵌入（如 Google AdSense、穿山甲）。虽然 loading="lazy" 对 也有效，但存在严重隐患：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- Safari 15.4+ 才支持
iframe的loading="lazy"，旧版 iOS 微信内核直接忽略，导致广告提前加载并拖慢首屏 - 广告 iframe 内部资源（JS、图片）不受外层 lazy 控制，仍可能在页面加载初期就发起请求
- 多数广告平台要求 iframe 在 DOM 插入后立即初始化，延迟加载会破坏其生命周期钩子
真正可控的方式是：用 IntersectionObserver 监听广告容器，进入可视范围后再动态 appendChild(iframe)，并确保 src 是完整 URL（不能含 query 参数拼接逻辑，否则缓存失效）。
最易被忽略的一点：广告图的 decoding="async" 要配合使用。即使加载及时，大图解码也会卡住主线程，造成滚动掉帧——这对信息流广告体验是硬伤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
