loading="lazy"对底部轮播广告中的iframe基本无效，因其仅适用于静态html声明且src固定的iframe，而广告sdk动态插入的iframe无法识别该属性；必须采用data-src配合intersectionobserver控制加载，并预留尺寸防cls。
loading="lazy" 对底部轮播广告里的 <iframe></iframe> 基本无效，尤其当它位于页面底部但仍在初始视口内（比如用户滚动很快、屏幕较高、或广告高度较大），浏览器会强制立即加载，完全忽略 loading="lazy"。
更关键的是：轮播广告通常由广告 SDK 动态插入 iframe，而 loading="lazy" 只对 HTML 中静态声明、src 固定的 <iframe></iframe> 生效。动态生成的 iframe（如 GAM、广点通返回的）根本不会被该属性识别，Chrome Network 面板里请求 Priority 仍显示为 high，且可能触发重复加载或风控拦截。
所以，靠 loading="lazy" 优化底部轮播广告，不仅效果落空，还容易掩盖真实问题。
底部轮播广告必须用 data-src + IntersectionObserver 控制加载
这是唯一稳定、可控、兼容主流环境（含微信 iOS、旧版安卓 WebView）的方案：
-
初始 HTML 中不写
src，只保留占位结构和data-src<div class="ad-carousel" data-ad-unit="/123/bottom_banner"> <div class="carousel-slide"></div> <div class="carousel-slide"></div> </div>
-
用
IntersectionObserver监听轮播容器是否进入可视区（不是单个 slide，而是整个广告区块）-
rootMargin: "0px 0px 200px 0px"提前触发，避免用户已看到轮播边框才开始加载 - 触发后，动态创建 iframe 并注入
sandbox="allow-scripts allow-popups"隔离脚本 - 加载完成立即调用广告 SDK 的
refresh()或display()方法（如googletag.pubads().refresh()）
-
每个 slide 加载后标记
data-loaded="true"，切换时直接display: block复用，避免重复请求
轮播广告还需防布局抖动（CLS）
底部广告若未预留尺寸，加载后撑开页面，会造成 Cumulative Layout Shift（CLS）扣分：
- 给
.ad-carousel设置固定高度（如height: 200px）或 aspect-ratio - 使用骨架屏或浅灰背景占位，提升视觉稳定性
- 所有 slide 容器统一宽高，避免轮播切换时尺寸跳变
不要依赖 CSS 隐藏来“懒”加载
display: none、opacity: 0 或 transform: translateY(100%) 对 iframe 完全无效——浏览器在解析 HTML 阶段就发起请求。只有真正延迟设置 src，才能切断首次请求链。
基本上就这些。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
