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

我尝试在我的网站中实现AJAX。当div changepass的内容被点击时，它应该加载changepass.template.php。这是我使用的代码。如何在页面加载时显示ajax加载gif动画？

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

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

来源

2009-08-20 Rajasekar

有很多方法可以做到这一点。一种简单的方法来做到：

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

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

来源

2009-08-20 10:42:21 kayteen

以这种方式使用css设置显示样式会忽略默认浏览器样式表设置。你可能不想显示'block' – 2009-08-20 10:48:28

是的，你是对的..我会修改它，并将其作为show（）/ hide（） – kayteen 2009-08-20 10:51:52

相反建议之后设置风格

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

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

这些帐户为HTMl元素的浏览器默认样式表定义。您可能不想显示图像的“块”。可以有不同的可能的显示风格负载为一个元素：

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

来源

2009-08-20 10:44:35

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

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

来源

2009-08-20 10:45:01 TheVillageIdiot

例如，为了使它更强大一点，你忘了添加到html中，你也可以在jQuery中做这件事，某些东西如：

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

这将自动添加div。

只需在onclick按钮事件中触发此操作。

使其不太容易出错。

来源

2009-08-20 11:48:37 JonB

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

回答

相关问题