不能直接往button里塞，因是void元素不接受子节点，强行写入会被忽略；应动态插入img控制显隐，或对input用background-image方案。
直接用 <img> 嵌在按钮里不行，<input type="submit"> 和 <button></button> 的 DOM 结构限制决定了必须分场景处理：GIF 动画靠替换 src 或重载触发，成功反馈靠 class 切换 + CSS 动画，两者不能混用同一套逻辑。
为什么不能直接往 button 里塞 ![]()
？
常见错误是写成 <button><img src="loading.gif">Submit</button> ——这在 <button></button> 里能工作，但一旦换成 <input type="submit"> 就彻底失效，因为它是 void element，不接受任何子节点。即使强行写进去，浏览器会忽略或报解析警告，GIF 根本不加载。
- ✅ 安全做法：对
<button></button>用内嵌<img>+ JS 控制显隐；对<input>只能用background-image+ 文本更新 - ⚠️ 注意：用
<button></button>时也别把<img>写死在 HTML 里，应 JS 动态插入，避免初始就加载 GIF（浪费带宽） - ? 补充：若用 SVG 替代 GIF，可直接内联进
<button></button>，且支持 CSS 控制动画帧，更可控
如何让点击后 GIF 重新播放？
GIF 一旦加载完成，再次点击不会自动重播——浏览器缓存了动画状态。必须手动“重载”它才能从头开始。
- 最简方案：
imgElement.src = imgElement.src，触发浏览器重新请求（含缓存命中，但强制重播） - 更稳方案：创建新
Image实例，赋值相同src，再用replaceChild替换原节点，绕过缓存干扰 - ❌ 避免
display: none切换：10ms 延迟不可靠，某些浏览器下仍卡在最后一帧 - ? 示例（绑定到按钮点击）：
const gifImg = document.getElementById('loading-gif');<br>gifImg.style.display = 'inline';<br>gifImg.src = gifImg.src; // 强制重播
成功状态动画怎么避免卡死？
用 class 切换驱动对勾动画很常用，但容易漏掉两个关键点：过渡结束监听、类清理时机。
- 必须监听
transitionend事件，而不是靠setTimeout猜时长——CSS 中transition时长变了，JS 里没同步就会错乱 - 动画结束后立刻移除 success 类，否则按钮永远停在“已成功”态，无法二次点击
- 别用
display: none控制对勾显隐：它不触发 transition，要用opacity: 0+transform: scale(0.7)+visibility: hidden - ⚠️ 特别注意：如果用户快速连点，得在 JS 里加防抖，比如设置
btn.disabled = true，动画结束再放开
input[type="submit"] 怎么右侧显示加载 GIF？
这是最常踩坑的场景——value 是纯文本，没法拼 HTML；background-image 是唯一可靠路径。
- CSS 必须设
background-position: right 8px center（数值按 padding 调整），background-size: 16px 16px，padding-right: 32px预留空间 - JS 里只改
element.value = 'Submitting...'，再加element.style.backgroundImage = 'url(loading.gif)' - 提交完成后，记得清空 background：
element.style.backgroundImage = 'none'，否则图标残留 - ? 提示：GIF 文件建议用 base64 内联，避免额外请求；但体积大时仍推荐外链 + HTTP 缓存
真正麻烦的不是让动画动起来，而是确保它只在该动的时候动、动完立刻回归可操作状态——尤其是表单按钮，用户多点一次，JS 状态就可能错一层。GIF 重播、class 清理、disabled 控制，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
