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

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

编辑显示:块,以显示()由詹姆斯·怀斯曼建议后:)

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按钮事件即可.

使错误变得不那么开放.