如何在頁面加載時顯示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;
    });
});

編輯后的顯示：在James Wiseman的建議后阻止 顯示（） :)

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