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）。给我一些代码提示。

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的建议，编辑显示：阻止到 show（）：）

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

将自动添加div。

只需点击onclick按钮事件即可。

使错误更容易接受。

Answer 3

而是设置样式

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

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

这些解释了HTMl元素的更广泛的样式表定义。您可能不希望为图像显示“阻止”。元素可以有许多不同的显示样式：

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

Answer 4

你可以在调用load之后调用一些方法显示加载gif并在load函数中使用回调隐藏它：

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

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

4 个答案: