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

Question

我知道如何在用户点击Bootstrap按钮时显示loading ...文本。这样我就这样做了

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 。

我使用了CSS background属性和jQuery .show()以及。hide()方法：

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

Answer 3

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