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

我尝试在我的网站上实现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

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

JS：

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

编辑后的显示：在James Wiseman的建议后阻止 显示（） 🙂

Answer 2

例如，为了使其更加健壮，您忘记添加

对于html，你也可以在jQuery中执行此操作，例如：

 var container = $.create('div', {'id':'dvloader'}); var image = $.create('img', {'src':'https://stackoverflow.com/questions/1305260/how-to-show-ajax-loading-gif-animation-while-the-page-is-loading/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; });