loading="lazy"是现代浏览器原生懒加载方案，仅对img和iframe生效，需确保广告图片有真实src、避免容器overflow:hidden，并优先采用广告联盟内置方案。
img 标签用 loading="lazy" 最简单有效
现代浏览器（Chrome 76+、Firefox 75+、Edge 79+）原生支持 loading="lazy"，只需在 <img> 上加这个属性，浏览器就会自动延迟加载视口外的图片——包括广告图。它不依赖 JS，兼容性好，且对 SEO 友好。
常见错误是把它加在 <div> 或广告容器上，但该属性只对 <img> 和 <iframe> 生效。
- 广告图片必须有明确的
src或srcset，不能留空或用占位符 URL（如data:image/gif;base64,...），否则懒加载失效 - 如果广告由 JS 动态插入（比如通过
document.createElement('img')），需在插入前手动设置img.loading = 'lazy' - 不要和第三方懒加载库混用，可能触发重复请求或竞态问题
广告位 DOM 结构影响懒加载行为
懒加载是否触发，取决于元素是否“可滚动”以及其祖先是否有 overflow: hidden|auto|scroll。广告常嵌在 <div class="ad-container"> 里，若该容器设置了 overflow: hidden 且高度固定，浏览器可能无法正确判断图片是否进入视口。
- 确保广告图片的最近可滚动祖先（通常是
body或#main-content）没有意外截断滚动上下文 - 避免给广告容器设
height+overflow: hidden，这会让loading="lazy"完全失效 - 若广告需异步渲染（如通过广告联盟 JS），建议等广告 DOM 插入完成后再设置
loading="lazy"，而不是写死在初始 HTML 中
需要兼容老浏览器时用 IntersectionObserver 手动控制
IE 和旧版 Safari 不支持 loading="lazy"，这时得用 IntersectionObserver 监听广告图是否进入视口，再动态设置 src。注意：广告图通常带追踪参数（如 utm_source=ad），别漏掉。
立即学习“前端免费学习笔记（深入）”；
示例关键逻辑：
const adImages = document.querySelectorAll('img[data-ad-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.adSrc; // 真实广告图地址
img.removeAttribute('data-ad-src');
observer.unobserve(img);
}
});
});
adImages.forEach(img => observer.observe(img));
- 务必用
data-ad-src存真实地址，初始src设为 1×1 透明 GIF 或空字符串，避免提前请求 - 广告 JS 可能修改
<img>的src，监听前要确认 DOM 状态稳定，否则容易覆盖或丢失 - 部分广告联盟会自己做懒加载（如 Google AdSense 的
data-ad-format="auto"），此时再套一层手动懒加载反而干扰其统计和展示逻辑
广告图片懒加载的两个隐藏风险
广告图不是普通内容图，懒加载时容易出错的点往往不在技术实现，而在业务逻辑层面。
- 广告曝光计费依赖首次可见（viewable impression），如果懒加载太激进（比如离视口还有 800px 就加载），可能造成误计费；太保守（比如只在完全进入后才加载），又可能导致用户滑过时没展示——需和广告平台确认其 viewability 定义（通常要求 50% 面积 + 持续 1 秒）
- 某些广告 JS 会读取
img.naturalWidth或监听load事件来触发后续动作，若你用loading="lazy"，这些事件仍会正常触发，但时机延后，需检查广告脚本是否假设图片已加载
最稳妥的做法：先查广告联盟文档，看它是否已内置懒加载支持；若有，优先关掉自己的实现，避免叠加副作用。
