提交含图片上传的表单时Ajax按钮加载状态仅在请求完成后触发问题求助

核心问题 #

你代码中$.ajax配置了async: false开启了同步请求，这是导致按钮加载状态不显示的根本原因。
浏览器的JS执行和UI渲染共用同一个主线程，同步Ajax请求会阻塞整个主线程：你调用buttonLoad修改了按钮的内容和禁用状态后，浏览器还没来得及完成UI重绘，就被同步Ajax请求卡住，直到请求结束执行always回调将按钮状态恢复，所以用户全程看不到加载状态。

修复方法 #

直接删除$.ajax配置中的async: false即可，jQuery Ajax默认就是异步模式，你现有的done/fail/always回调逻辑完全适配异步场景，不需要修改其他业务代码。
修改后的Ajax配置示例：

request = $.ajax({
    url: "some-server-side-script",
    type: "post",
    data: formData,
    cache: false,
    contentType: false,
    processData: false
});

可选优化项 #

• 按钮禁用状态设置建议使用prop()代替attr()，表单元素的disabled属于布尔属性，prop()的处理更符合预期，可将buttonLoad、buttonUnload中的this_ref.attr("disabled", xxx)替换为this_ref.prop("disabled", xxx)
• 可额外增加全局提交状态锁，进一步避免异步请求过程中用户重复触发提交
• 大文件上传场景可增加进度条提示，优化用户体验

内容的提问来源于stack exchange，提问作者FNSK