缩略图点击不加载原图需检查data-src是否存在且可读，确保属性名正确、路径有效；切换时须预加载并监听onload再替换src，支持双向交换与错误回退；推荐button包裹保障移动端点击响应。
缩略图点击后不加载原图？检查 data-src 是否存在且可读
常见错误是把原图地址硬编码在 src 里，导致首屏就拉取几 MB 大图；或者写了 data-src 却拼错属性名（比如写成 data-original 或 data-full），JS 取不到值自然无法切换。必须统一用 data-src 存高清路径，且确保 HTML 中该属性真实存在、值非空、路径可访问。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 缩略图
<img alt="HTML缩略图怎么降级原图？双图切换实现步骤" >标签必须含loading="lazy"，浏览器自动跳过非视口图 - 路径全部用相对路径，从 HTML 文件所在目录算起，例如：
images/thumbs/cat-thumb.jpg对应images/originals/cat.jpg - 用
console.log(this.dataset.src)在点击事件里快速验证是否取到值 - 若原图地址来自 CMS 或接口，确保它没被 URL 编码污染（如
%20未解码）
切换时图片闪烁或空白？预加载 + onload 回调缺一不可
直接赋值 largeImg.src = thumb.dataset.src 后立刻显示，容易因网络延迟导致白屏或 fallback 占位图闪一下。必须等新图加载完成再替换，否则用户看到的是“先空再显”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 创建
new Image()实例，监听其onload事件，成功后再赋给目标<img alt="HTML缩略图怎么降级原图？双图切换实现步骤" >的src - 同时设置
onerror回调，降级为占位图或提示文案（如largeImg.src = '/assets/placeholder.jpg'） - 避免重复预加载：用 Map 缓存已加载过的
dataset.src地址，命中则跳过 new Image 流程 - 不要用
fetch()+Blob+URL.createObjectURL()，兼容性差且内存泄漏风险高
怎么让缩略图 ↔ 原图切换可逆？靠 src 和 dataset.src 交换，不是覆盖
只做“缩略图 → 原图”是半截逻辑。用户点第二次时得能切回来，否则体验断裂。核心不是“设新地址”，而是“交换两个地址”。如果原图加载失败，也要能回退到原始缩略图状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 切换函数内先缓存当前
src：const temp = img.src，再把img.src = img.dataset.src，最后img.dataset.src = temp - 务必在
onload成功后才执行交换，否则失败时dataset.src已被污染，无法恢复 - 若使用弹窗预览（modal），主图和缩略图不在同一 DOM 节点，需额外维护一个映射表，如
Map<thumbelement originalsrc></thumbelement> - 不推荐用 class 切换 + CSS 显示隐藏两套图，语义混乱、SEO 不友好、alt 属性无法同步更新
移动端点击无响应？<button></button> 包裹缩略图比 <div> 更可靠
<p>纯 <code><img alt="HTML缩略图怎么降级原图？双图切换实现步骤" > 在部分 iOS 版本或微信内置浏览器中，点击事件可能不触发，尤其当父容器有 pointer-events: none 或 CSS transform 干扰时。用 <button></button> 包一层，既保证事件捕获稳定，又支持键盘导航和 aria-current 状态标记。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 缩略图写法改为：
<button type="button" aria-label="查看大图"><img src="..." alt="HTML缩略图怎么降级原图？双图切换实现步骤" ></button> - CSS 上给
button设background: none; border: none; padding: 0; cursor: pointer;消除默认样式 - 避免用
onclick内联事件，统一用addEventListener('click', handler)，便于解绑和复用 - 若需支持触摸滑动（如 H5 图集），
touchstart必须加e.preventDefault()，否则会触发页面滚动干扰
dataset.src、主图的 src、modal 的当前索引、预加载队列、错误 fallback，任意一环断掉都会导致“点不动”或“切错图”。别省那几行缓存和校验代码。
