全屏预览不卡顿的关键是避免直接对缩略图调用requestfullscreen()，应先preventdefault()，用settimeout延后调用，clone图片至独立fs-overlay容器并设宽高为100vw/vh、object-fit:contain，监听fullscreenchange同步ui，预加载校验图片有效性，全屏时禁用默认touchmove防冲突。
全屏预览触发逻辑怎么写才不卡顿
直接用 click 监听缩略图然后 document.body.requestFullscreen() 是最常见错误——它会阻塞渲染，尤其在图片多或 DOM 深时，点击后黑屏半秒很常见。真正顺滑的做法是：先用 event.preventDefault() 阻止默认行为，再用 setTimeout 把全屏调用延后到下一帧，同时提前把目标 <img> 元素 clone 到一个独立 <div class="fs-overlay"> 中，避免重排。
<p>关键点：</p>
<ul>
<li>不要对原缩略图调用 <code>requestFullscreen()，它可能被 CSS 缩放/transform 扭曲
width: 100vw; height: 100vh; object-fit: contain;
fullscreenchange 而非 click 来同步 UI 状态（比如关闭按钮显隐）键盘和手势导航怎么兼容 Safari 和 Chrome
Safari 对 ArrowLeft/ArrowRight 键支持稳定，但对 Escape 退出全屏的响应有延迟；Chrome 则对 touchmove 横向滑动识别更灵敏，但容易和页面滚动冲突。统一处理方案是：只在 document.fullscreenElement 存在时绑定事件，且对 touch 做防抖 + 方向过滤。
实操建议：
- 键盘：监听
keydown，只响应event.key === 'Escape'（退出）、'ArrowLeft'（上一张）、'ArrowRight'（下一张） - 触摸：用
touchstart记录clientX，touchend时计算偏移，绝对值 > 50px 才触发切换 - 禁用默认行为：对
touchmove在全屏状态下调用event.preventDefault()，否则 iOS Safari 会回弹
图片加载失败时全屏界面怎么不崩
缩略图能显示不代表大图 URL 一定有效——CDN 失效、权限问题、404 都会导致 <img> 的 onerror 触发，但此时全屏已激活，空白页+无提示极其糟糕。必须在 clone 图片前做预加载校验。
可靠做法：
- 创建
Image实例，onload后再插入 DOM，onerror时显示占位图并console.warn错误 URL - 全屏容器里预留
<div class="fs-error">图片加载失败</div>，CSS 设为display: none，出错时flex居中显示 - 避免用
background-image加载大图——它无法监听加载失败，也无法自然触发object-fit
移动端双击放大怎么和全屏逻辑不打架
双击放大本质是 touchend 两次快速触发，但全屏模式下系统默认禁用了 pinch-zoom，如果强行开启，缩放手势会干扰左右翻页。折中解法是：全屏时允许单指双击触发 transform: scale(2)，但限制最大缩放倍数，并禁用所有其他手势。
要点：
- 用
transform: scale()而非zoom（后者不被 Safari 支持） - 记录双击时间戳，间隔
- 缩放后禁止
touchmove移动图片（除非长按拖拽），否则用户极易误操作退出全屏 - 退出全屏时必须重置
transform，否则下次进入会继承上次缩放状态
fullscreenchange 事件可能触发多次，document.exitFullscreen() 可能被拒绝，DOM 清理漏掉一个 eventListener 就会造成内存泄漏。动手前先想清楚：谁负责销毁？在哪一刻销毁？
