6

我尝试在我的网站中实现 AJAX。当点击 div changepass 的内容时，它应该加载 changepass.template.php。这是我使用的代码。

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

我的问题是如何在页面 changepass.template.php 完全加载时显示 GIF 动画 (loading.gif)。请给我一些代码提示。

4

4 回答 4

22

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

<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() :)

于 2009-08-20T10:42:21.837 回答
9

例如，为了使它更健壮一点，您忘记添加 

<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 按钮事件上触发它。

使它不太容易出错。

于 2009-08-20T11:48:37.180 回答
2

而是设置样式

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

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

这些说明了 HTMl 元素的浏览器默认样式表定义。您可能不想为图像显示“块”。一个元素可以有多种可能的显示样式：

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

于 2009-08-20T10:44:35.607 回答
0

您可以在调用 load 后调用一些方法来显示加载 gif 并使用 load 函数中的回调将其隐藏：

$(function() {
   $(".changepass").click(function() {
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){
            $("#gifImage").hide();
    });
   return false;
});
于 2009-08-20T10:45:01.550 回答