用图像替换文本[重复]答案

【问题标题】：Replace text with image [duplicate]用图像替换文本[重复]
【发布时间】：2014-05-12 07:25:34
【问题描述】：

当用户填写表单并按下提交时，表单在提交信息时被禁用。我使用以下代码禁用表单：

$form.find('button').prop('disabled', true);

如何将按钮的文本替换为加载图像？

【问题讨论】：

请同时发布您的 HTML 代码
查看链接forum.jquery.com/topic/show-loading-image-when-clicking-a-link
这不是那个问题的重复，一个处理 mootools 但这个处理 JQuery。

标签： javascript jquery html

【解决方案1】：

做吧

$form.find('button').prop('disabled', true).html('<img src="yourimagesoruce">');

【讨论】：

【解决方案2】：

如果您想将“加载图像”放入按钮中，那么作为一种解决方案，您可以将“背景图像”属性设置为带有“加载图像”的 url 的按钮。您还可以设置其他属性来定义图像的外观。

例子：

$form.find('button').prop('background-image', 'url("img/loading.gif")');

【讨论】：

【解决方案3】：

只需获取按钮并添加背景

$('input[type=submit]').css('background', "url('please_wait2.png') no-repeat top left");

并禁用它

$('input[type=submit]').prop("disabled",true)

【讨论】：

当按钮统计启用或禁用时，此 css 样式将显示等待图像，我写错了吗？
当您提交表单时，它会将图像加载为按钮的背景图像，然后将其禁用。

【解决方案4】：

你可以使用replaceWith来替换按钮

$(":submit").on("click", function (e) {
    $("form").prop("disabled", true);
    $(this).replaceWith("<img id='loadingImg' src='http://www.loadinfo.net/images/preview/11_cyrcle_one_24.gif?1384388177' />");    
});

http://jsfiddle.net/btxKc/

【讨论】：