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

【问题标题】：How to show ajax loading gif animation while the page is loading?如何在页面加载时显示 ajax 加载 gif 动画？
【发布时间】：2010-11-21 06:33:54
【问题描述】：

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

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

我的问题是如何在页面 changepass.template.php 完全加载时显示 GIF 动画 (loading.gif)。请给我一些代码提示。

【问题讨论】：

标签： php jquery css ajax loading

【解决方案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() :)

【讨论】：

以这种方式使用 css 设置显示样式会忽略默认的浏览器样式表设置。您可能不想显示“阻止”
是的，你是对的..我会修改它并使其成为 show()/hide()

【解决方案2】：

而不是设置样式

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

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

这些说明了 HTMl 元素的浏览器默认样式表定义。您可能不想为图像显示“块”。一个元素可以有多种不同的显示样式：

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

【讨论】：

【解决方案3】：

您可以在调用 load 后调用一些方法来显示加载 gif 并使用 load 函数中的回调将其隐藏：

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

【讨论】：

【解决方案4】：

例如，为了使它更健壮一点，您忘记添加

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

这会自动添加 div。

只需在 onclick 按钮事件上触发。

使其不易出错。

【讨论】：