2010-06-23 218 views
4

我想顯示一個加載動畫,而我的頁面加載時,加載完成後,顯然隱藏它。頁面加載動畫

我在使用Masterpages的ASP.NET工作,只是想知道有一個簡單的方法來做到這一點使用JQuery?

任何指針,將不勝感激。

感謝

回答

3

只需將圖片與頁面上的gif動畫。給它一個加載圖片ID並添加以下腳本:

$(document).ready(function(){ 
    $('#loadingImage').hide(); 
}); 

順便說一句,您的頁面加載需要多長時間?它使用AJAX調用來加載數據嗎?也許你應該看看這個,並在回調處理程序中調用圖像上的hide()函數。

+0

所以簡單而有趣,有沒有辦法,而所有的頁面沒有完全加載,頁面將被禁用? – Mostafa 2010-06-23 12:00:14

+0

Hi @Mostafa,如果你想在頁面上禁用腳本直到加載,$(document).ready(function ...)是初始化它們的地方。如果你想做更多的事情,可以發佈一個更詳細的問題。 – 2010-06-23 12:05:29

+0

該頁面需要大約5秒鐘才能加載,但在我的場景中,它是在單獨的框架中加載的,因此我想向用戶提供一些反饋,否則您單擊此鏈接並且沒有任何事情發生。 我已經試過你的示例代碼,但似乎一切都發生了,而不是加載div出現然後消失當主要內容被加載。 我猜想某種處理程序需要更復雜的解決方案。我正在使用APP.NET AJAX如果可以做到這一點。 – bigtv 2010-06-23 13:17:14

0

考慮使用UpdateProgress控制

+0

你有這樣的例子嗎? – bigtv 2010-06-23 13:03:00

+0

我發佈的鏈接有一個例子在頁面底部 – 2010-06-23 13:09:36

+0

耶,對不起!!!! – bigtv 2010-06-23 13:13:00

0

我我的母版頁上做出這樣的動畫:

<div id="loading" style="text-align: center" hidden><asp:Image ID="loadingImage" runat="server" ImageUrl="~/Images/loading.gif" /></div> 

,然後我用jQuery的這樣

<script> 
function showLoading() { 
    $("#loading").show(); 
    } 

    var loadingTimeout = setTimeout(showLoading, 3000); 

    $(document).ready(function() { 
    clearTimeout(loadingTimeout); //make sure loader doesn't appear if page loads in less than 3 seconds 
    $("#loading").hide(); 
    }); 
</script> 

我希望這將有助於。