jQuery 单击时如何使用 Bootstrap 按钮显示动画 gif

How to show animated gif using Bootstrap button when clicked

提问by Thomas

i know how to show loading... text when user click on Bootstrap button. this way i do it

我知道如何在用户单击 Bootstrap 按钮时显示正在加载...文本。我这样做

http://jsfiddle.net/YCst4/1/

http://jsfiddle.net/YCst4/1/

add two dependency files
1) bootstrap.min.css 
2) bootstrap.min.js 

<button class="btn" id="button" data-text-loading="Loading...">Press Me</button>
$('#button').button();

$('#button').click(function() {
    $(this).button('loading');
});

now how could i show this animated gif http://www.bba-reman.com/images/fbloader.gifat the place of button when user will click on button.

现在我如何在用户单击按钮时在按钮位置显示此动画 gif http://www.bba-reman.com/images/fbloader.gif。

please guide me how to do with sample code if possible. thanks

如果可能，请指导我如何处理示例代码。谢谢

回答by Alvaro

What about this:

那这个呢：

$('#button').button();

$('#button').click(function() {
    $(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});

Living demo: http://jsfiddle.net/YCst4/857/

现场演示：http: //jsfiddle.net/YCst4/857/

回答by Artyom Neustroev

If I understood you correctly, have a look at this Fiddle.

如果我理解正确，请看一下这个Fiddle。

I used CSS backgroundattribute and jQuery .show()and .hide()methods:

我使用了 CSSbackground属性和 jQuery.show()和 . hide()方法：

$('#button').click(function () {
    $(this).hide();
    $(".loader").show();
});

回答by edotassi

$('#button').click(function() {
    $(this).replaceWith('<img src="[loader-url]" />');
});