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

Posted 2023-02-24

【中文标题】如何在页面加载时显示 ajax 加载 gif 动画？

【英文标题】：How to show ajax loading gif animation while the page is loading?

【发布时间】：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)。请给我一些代码提示。

【参考方案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 按钮事件上触发。

使其不易出错。