通过监听缩略图点击事件，动态交换 `src` 与自定义 `data-attribute` 中存储的原图地址，即可实现无刷新、可逆的缩略图↔原图切换效果。
在网页开发中，常见的图片预览交互需求是：用户点击一个轻量级缩略图后，该图片立即“升级”为高清原图显示，再次点击则恢复为缩略图——这种双向切换既节省带宽，又提升响应速度，典型案例如 4chan 的帖子图浏览。
实现核心在于状态暂存与属性交换：我们利用 HTML5 自定义属性（如 data-original）预先存放原图 URL，而 的 src 属性初始指向缩略图。点击时，用 JavaScript 原生 API 交换二者值即可。
以下是完整、健壮的实现方案：
✅ 推荐 HTML 结构（语义清晰、易于维护）
@@##@@
✅ 现代化 JavaScript 实现（支持多个缩略图，兼容性好）
// 使用 querySelectorAll 更灵活，且避免 getElementsByClassName 的实时集合陷阱
document.querySelectorAll('.thumbnail').forEach(thumb => {
thumb.addEventListener('click', function () {
const currentSrc = this.src;
const originalSrc = this.dataset.original || this.getAttribute('data-original');
// 安全校验：仅当存在有效原图地址时才执行切换
if (originalSrc && originalSrc.trim()) {
this.setAttribute('data-original', currentSrc);
this.src = originalSrc;
}
});
});⚠️ 注意事项与最佳实践
- 不要滥用 getElementsByClassName：它返回的是动态 HTMLCollection，循环中若 DOM 变化可能导致意外行为；querySelectorAll 返回静态 NodeList，更可靠。
- dataset vs getAttribute：this.dataset.original 自动将 data-original 转为驼峰式 original，但若属性名含特殊字符（如 data-img-url → imgUrl），建议统一用 getAttribute('data-img-url') 避免歧义。
- 防重复绑定：若脚本可能多次执行（如 SPA 路由复用），需增加事件监听器去重逻辑或使用 once: true（如仅需单次切换）。
- 无障碍增强（可选）：为提升可访问性，可添加 role="button" 和 tabindex="0"，并监听 Enter/Space 键触发切换。
? 扩展思路
- 若需「点击缩略图在模态框展示原图」，可改用 event.preventDefault() + 动态插入
- 配合 loading="lazy" 和 decoding="async" 可进一步优化首屏加载性能；
- 结合 IntersectionObserver 实现滚动到视口再加载原图，适合长列表场景。
此方案零依赖、轻量高效，完美契合现代前端对简洁性与可维护性的双重追求。
立即学习“Java免费学习笔记（深入）”；
