优先使用PhotoSwipe的initialZoomInEnd事件插入广告，广告层需挂载body顶层、设fixed定位和足够z-index，监听afterChange获取索引控制触发条件，关闭时调用原生close方法并清理资源。
网页相册浏览中插入全屏广告，本质是「在用户触发查看大图时，叠加一层广告层」，但直接硬塞 document.write 或全局弹窗会破坏体验、触发浏览器拦截，且现代相册库（如 Lightbox2、Fancybox、PhotoSwipe）默认不提供广告钩子——得自己动手劫持生命周期。
怎么监听相册「进入全屏预览」事件
多数轻量相册组件用 click 打开大图，但没暴露统一事件。PhotoSwipe 是少数提供明确生命周期的库，它有 pswp.listen('afterChange') 和 pswp.listen('initialZoomInEnd')；而 Lightbox2 只能靠监听 .lb-outerContainer 的 transitionend 或轮询 document.querySelector('.lightboxOverlay').style.display 是否变为 block。
- 优先选 PhotoSwipe：它的
initialZoomInEnd是最稳的广告插入时机，此时图片已渲染完成、动画结束，用户视线聚焦 - 若用自研相册，确保大图容器有唯一 class（如
.gallery-modal），用MutationObserver监听其display或visibility变化 - 别用
setTimeout硬等 300ms —— 网络慢或设备卡时，图片可能还没加载完，广告就盖在空白上
广告层怎么避免被相册组件遮挡
全屏广告必须比相册的 z-index 更高，但 PhotoSwipe 默认 z-index 是 1000，Lightbox2 是 10000，Fancybox v3 是 99999。盲目设 z-index: 9999999 会失效——因为相册容器常带 transform，触发新层叠上下文，导致子元素 z-index 失效。
- 广告
<div id="ad-fullscreen">必须挂到document.body最外层，不能嵌在相册 DOM 内部 - 给广告层加
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，并确保父级无transform或filter - 关键：加
pointer-events: auto;（默认可能是none），否则用户点不了「跳过」按钮
怎么控制广告只在特定图片展示
用户翻到第 3 张才弹广告，不是每张都弹——这需要和相册的当前索引对齐。PhotoSwipe 有 pswp.getCurrentIndex()，但必须在 afterChange 后调用；而 Lightbox2 没 API，只能靠解析 URL 或 data-index 属性。
立即学习“前端免费学习笔记（深入）”；
- 在相册初始化前，给每张缩略图加
data-ad-trigger="true"（如仅第 3 张：<a data-ad-trigger="3"></a>） - 监听相册打开动作时，从触发元素读取该属性：
event.target.dataset.adTrigger === '3'，再决定是否showAd() - 别用图片 URL 做判断（如
includes('vip.jpg')），CDN 路径可能带 hash 或参数，不可靠
为什么广告关闭后相册会卡住或白屏
常见于手动操作 DOM 后没恢复相册状态。比如 PhotoSwipe 关闭时会重置 body 的 overflow 和 padding-right（防滚动条闪动），但广告层 remove() 后若没触发 pswp.close() 或没还原 body.style.overflow，页面就锁死。
- 广告「跳过」按钮必须调用相册原生关闭方法，而不是只删广告层：
pswp.close()或lightbox.hide() - 广告层
display: none比remove()更安全——保留 DOM 结构，避免重绘抖动 - 务必监听
pswp.listen('destroy')清理广告定时器或事件监听器，否则内存泄漏
真正难的不是显示广告，而是让广告和相册的渲染节奏、DOM 生命周期、CSS 层叠规则严丝合缝。一个没处理好的 transform 或漏掉的 body 样式重置，就能让用户卡在黑屏里按 F5。动手前先用 DevTools 的 Layers 面板看下 z-index 实际生效层级，比猜强得多。
