如何在頁面加載時顯示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動畫？

回答

相關問題