必须用 data-src + IntersectionObserver 延迟真实加载广告位，而非仅 setTimeout 显示；因 setTimeout 无法阻止预加载、计费异常及布局抖动，而 IntersectionObserver 可确保广告在进入视口时才加载，兼顾性能、计费准确与兼容性。

直接用 setTimeout 就能控制广告延时显示，但光写个定时器远远不够——多数人卡在「广告一加载就发请求」或「用户还没看就弹出来」上，结果影响首屏性能、触发广告计费异常，甚至被浏览器拦截。

为什么 setTimeout(document.getElementById('ad').style.display = 'block', 3000) 不行

这行代码本身语法就错：setTimeout 第一个参数必须是函数，不能是赋值表达式。更关键的是，它没解决真实问题：

• 广告 <iframe></iframe> 或图片的 src 如果已写死，浏览器会在页面解析阶段就预加载，3 秒后只是“显示”，但流量和计费早已发生
• 移动端微信内置浏览器、旧版 Safari 会忽略 loading="lazy"，对广告 iframe 完全无效
• 用户刚打开页面就滚动离开，广告仍会按计划弹出，体验生硬且易被屏蔽

必须用 data-src + IntersectionObserver 延迟真实加载

广告位 HTML 必须用占位结构，真实资源延迟到进入视口才注入。这是目前唯一兼顾性能、计费准确性和兼容性的方案：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• HTML 中写：<div id="ad-banner"></div>，不写 src，也不写 iframe
• 预留尺寸（如 height: 200px），防止布局抖动（CLS）
• 用 IntersectionObserver 监听进入视口，再动态创建 iframe 并设 src：

  const adEl = document.getElementById('ad-banner');
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      const iframe = document.createElement('iframe');
      iframe.src = adEl.dataset.src;
      iframe.sandbox = 'allow-scripts allow-same-origin';
      adEl.appendChild(iframe);
      observer.unobserve(adEl);
    }
  }, { threshold: 0.1 });
  observer.observe(adEl);

如果必须固定延时（比如运营强要求 5 秒后弹）

那就得把「延时」和「加载」拆开：先等时间，再等视口，再注入。否则用户开着页面去泡茶，回来发现广告早刷了三次。

• 用 setTimeout 启动观察器，而不是直接操作 DOM：

  setTimeout(() => {
    const adEl = document.getElementById('ad-banner');
    const observer = new IntersectionObserver(...);
    observer.observe(adEl);
  }, 5000);

• 加防重逻辑：if (adEl.dataset.loaded) 就直接 return，避免用户反复进出视口触发多次加载
• 移动端要额外监听 touchstart 或 scroll，因为部分安卓 WebView 对 IntersectionObserver 支持不稳定

真正难的不是让广告“几秒后出现”，而是让它“几秒后、且用户大概率在看的时候，才开始加载并展示”。setTimeout 只负责时间，剩下的事它一句都管不了。