如何在页面加载时显示ajax加载gif动画？

Question

我尝试在我的网站中实现 AJAX。当点击 div changepass 的内容时，应该加载 changepass.template.php。这是我用来实现的代码：

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

我有一个问题，如何在页面 changepass.template.php 完全加载时显示 GIF 动画（loading.gif）？请给我一些代码提示。

- Rajasekar

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

根据James Wiseman的建议，我将display:block编辑为show() :)

- kayteen

---

使用CSS设置显示样式的方式会忽略默认浏览器样式表设置。您可能不想显示“块”。 - James Wiseman

是的，你说得对。我会修改它并将其改为show()/hide()。 - kayteen

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按钮事件上触发此操作。

这使得它更不容易出现错误。

- JonB

Answer 3

不要设置样式

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

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

这些方法适用于HTML元素的浏览器默认样式定义。您可能不想将图像显示为 'block'。元素有许多不同的可能显示样式： http://www.w3schools.com/htmldom/prop_style_display.asp

- James Wiseman

Answer 4

在调用load函数后，您可以调用某些方法来显示加载gif并使用回调隐藏它：

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

- TheVillageIdiot