jquery - 单击时如何使用引导按钮显示动画 gif

Question

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

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');
});

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

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

Answer 1

那这个呢：

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

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

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

Answer 2

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

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

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

Answer 3

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