现代图片预览弹窗应采用事件委托监听+data-src存原图，避免硬编码onclick；缩略图src仅加载小图，点击时读取data-src渲染高清图；弹窗内图片需显式设置src而非依赖lazy加载；缩放拖拽须用transform+will-change触发gpu加速；移动端需设touch-action为pinch-zoom以支持双指缩放。
点击图片直接触发预览弹窗，别写 onclick="showModal(src)"
硬编码 onclick 事件不仅难维护，还会在动态插入图片时失效。现代做法是委托监听 + data-src 存原图地址。缩略图用 <img> 的 src，高清图地址存在 data-src 里，点击时读取渲染到弹窗中。
常见错误：把原图地址也塞进 src，导致页面加载就拉取大图，拖慢首屏；或者用 title 或 alt 存路径，语义错误且易被截断。
- 缩略图 HTML 示例：
<img src="thumb.jpg" class="preview-trigger"> - 监听写在父容器上更稳妥：
document.querySelector('.gallery').addEventListener('click', e => { if (e.target.matches('img.preview-trigger')) { showPreview(e.target.dataset.src); } }); - 务必检查
e.target.dataset.src是否存在，空值或相对路径（如./images/a.jpg）可能在弹窗中 404
弹窗里的 <img> 加不加 loading="lazy"？
加了会出问题。弹窗默认隐藏（display: none 或 visibility: hidden），但 loading="lazy" 依赖 Intersection Observer，而隐藏元素永远不进入视口，导致图片不加载、一直显示空白或占位符。
正确做法：弹窗显示后再设置 src，或显式移除 loading 属性。
- 推荐方案：弹窗 DOM 初始化时先不设
src，调用showPreview(url)时再赋值：modalImg.src = url; - 如果用了
loading="eager"，部分旧版 Safari 不支持，降级为不写该属性更安全 - 注意：不要用
background-image替代<img>，否则无法自然响应max-width、打印、右键保存等行为
缩放/拖拽功能卡顿？检查 transform 和 will-change
高频鼠标/触摸事件中直接改 style.left/top/scale 是性能杀手。必须用 transform: translate(x, y) scale(s) + will-change: transform 触发 GPU 加速，否则在中低端设备上明显掉帧。
容易踩的坑：只加 transform 不加 will-change，或加在错误节点（比如加在弹窗 wrapper 上，实际缩放的是内部 <img>）。
- 确保缩放操作作用于图片本身：
modalImg.style.transform = `translate(${x}px, ${y}px) scale(${scale})`; - 初始化时给图片加：
modalImg.style.willChange = 'transform';（仅首次，避免重复设置） - 拖拽结束或缩放重置后，建议清空
transform并重置will-change（设为auto），防止内存占用累积
移动端双指缩放失效？别忘了 touch-action
Chrome / Safari 在 touch-action: none 下会禁用原生双指缩放，但很多弹窗库默认这么设来“接管”手势——结果用户点两下放大、双指捏合都失灵。
解决思路不是完全放开 touch-action，而是精细控制：允许缩放，禁止滚动穿透。
- 给弹窗图片设：
style.touchAction = 'pinch-zoom';（兼容 Chrome/Safari） - 如果还要支持单指拖拽，用
'pinch-zoom pan-x pan-y'，但需配合preventDefault()在 touchmove 中拦截，否则页面会跟着滚动 - 绝对不要对整个弹窗遮罩层（overlay）设
touch-action: none，它应该保持auto，否则手势根本传不到图片上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
