如何通过 JavaScript 在点击提交按钮后显示加载动画图标-html教程-PHP中文网

如何通过 JavaScript 在点击提交按钮后显示加载动画图标

本文介绍如何在用户点击 HTML 表单的按钮后，动态将按钮文字改为“Logging in”并右侧显示加载 GIF 动画——由于 input 标签不可嵌套内容，需借助 CSS 背景图方案实现。

本文介绍如何在用户点击 html 表单的 `` 按钮后，动态将按钮文字改为“logging in”并右侧显示加载 gif 动画——由于 input 标签不可嵌套内容，需借助 css 背景图方案实现。

是自闭合的替换元素（replaced element），不支持子节点，因此无法像

以下是完整、可运行的解决方案：

✅ 正确实现步骤

HTML 结构（保持原样，仅确保 ID 和 class 可选）
基础 CSS（建议添加，提升可读性与图标对齐）

sc-java-to-ts-interface
将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。

下载
```
input[type="submit"] {
border: 1px solid #ccc;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
background-color: #fff;
background-repeat: no-repeat;
background-position: right 8px center; /* 图标距右边缘8px，垂直居中 */
background-size: 16px 16px; /* 严格匹配 GIF 尺寸 */
/* 关键：预留右侧空间，避免文字被遮挡 */
padding-right: 32px;
}
```

JavaScript（jQuery 实现，含防重复提交与状态还原）

jQuery(document).ready(function($) {
$('.ajaxform').on('submit', function(event) {
 event.preventDefault();

 const $submit = $(this).find('[type="submit"]');
 const originalValue = $submit.val();

 // 1. 禁用按钮，防止重复提交
 $submit.prop('disabled', true);

 // 2. 更新按钮文字
 $submit.val('Logging in');

 // 3. 设置加载图标背景（使用您提供的 GIF）
 $submit.css({
   'background-image': 'url("https://i.ibb.co/QCMtktm/ns.gif")',
   'background-size': '16px 16px',
   'background-repeat': 'no-repeat',
   'background-position': 'right 8px center',
   'padding-right': '32px'
 });

 // ✨ 可选：模拟异步请求完成后的恢复逻辑（实际中替换为 AJAX 回调）
 // setTimeout(() => {
 //   $submit.prop('disabled', false).val(originalValue);
 //   $submit.css('background-image', 'none');
 // }, 2000);
});
});

⚠️ 注意事项

图标尺寸匹配：务必确保 background-size 与 GIF 实际尺寸（如 16px 16px）一致，否则可能拉伸或截断。
文字对齐安全：使用 padding-right 为图标预留空间，避免文字紧贴图标导致视觉拥挤。
无障碍友好：若需更高可访问性，建议改用
兼容性：该方案兼容所有现代浏览器及 IE11+，无需额外 polyfill。

✅ 总结

通过 CSS background-image 替代内联 HTML 内容，是操作时展示加载状态的标准、健壮且语义合规的方式。它规避了 DOM 结构限制，保持简洁性，同时具备良好的性能与维护性。实际项目中，只需将 background-image URL 替换为您的 CDN 地址，并在 AJAX 成功/失败回调中恢复按钮状态即可。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南