如何显示AJAX加载GIF动画，而页面加载？(How to show ajax loading gi

我试着在我的网站来实现AJAX。 当点击DIV changepass的内容，那么它应该载入changepass.template.php。 下面是一个使用该代码的IM。

 $(function() {
   $(".changepass").click(function() {
    $(".block1").load("views/changepass.template.php");
    return false;
 });

我的问题是如何显示GIF动画（loading.gif），而页面changepass.template.php满载。 给我一些代码提示请。

Answer 1:

有许多方法来做到这一点。 一个简单的方法来做到：

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

JS：

$(function() {
    $(".changepass").click(function() {
        $("#dvloader").show();
        $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });
        return false;
    });
});

编辑显示：块从詹姆斯怀斯曼建议后显示（）:)

Answer 2:

为了使它有点更强大的，例如，您忘了加

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

到HTML，你也可以做到这一点jQuery的，是这样的：

var container = $.create('div', {'id':'dvloader'});
var image = $.create('img', {'src':'loading.gif'});
container.append($(image));
$("body").append($(container));

它会自动添加股利。

刚刚火这上的onclick按钮事件。

使得它的错误少一点打开。

Answer 3:

相反，设置样式

.css("display", "block");

只需使用.hide()和。 show()方法。

这些占HTML元素的布劳尔默认样式定义。 您可能不希望为图像显示“块”。 可以有不同的可能的显示样式的单元载荷：

http://www.w3schools.com/htmldom/prop_style_display.asp

Answer 4:

你可以调用一些方法来显示加载GIF调用加载后和装载功能使用回调隐藏它：

$(function() {
   $(".changepass").click(function() {
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){
            $("#gifImage").hide();
    });
   return false;
});

文章来源: How to show ajax loading gif animation while the page is loading?