顯示加載動畫，同時功能完成

我有一個函數在我的.aspx.cs代碼，這需要很長的時間來做處理，直到當我想顯示一個很酷的加載動畫。
我查看了一些較早的帖子，但是這些對我來說都不起作用，或者有針對頁面加載場景的特定解決方案（而不是一個函數完成時加載）。顯示加載動畫，同時功能完成

我想正確的做法是在主函數啓動之前（這需要很長時間）啓動Javascript startLoader（）函數，然後從.aspx.cs本身調用stopLoader（）來停止函數結束時的加載器。任何建議如何實現這一點？

來源

2012-05-10 user1372448

是的，我在ASP.NET Web From（而不是ASP.NET MVC解決方案）中完成了此操作。您需要提供OnSubmit客戶端事件處理程序。它基本上分解爲三個部分：使用Javascript，HTML DIV，後面一行代碼：

Javscript：

function ShowLoading(e) { 
     // var divBg = document.createElement('div'); 
     var divBg = document.getElementById('blockScreen'); 
     var divLoad = document.createElement('div'); 
     var img = document.createElement('img'); 

     img.src = 'images/ajax-loader.gif'; 
     divLoad.setAttribute("class", "blockScreenLoader"); 
     divLoad.appendChild(img); 

     divBg.appendChild(divLoad); 

     document.getElementById('blockScreen').style.display = 'block'; 

     // These 2 lines cancel form submission, so only use if needed. 
     //window.event.cancelBubble= true; 
     //e.stopPropagation(); 
    } 

    function HideLoading() { 
     //alert('hideloading'); 
     document.getElementById("form1").onsubmit = null; 
     document.getElementById('blockScreen').style.display = 'none'; 
     //alert('done'); 
    }

添加以下DIV

<div id="blockScreen" class="blockScreen" style="display:none">&nbsp;</div>

最後，添加以下的Page_Load中後面的代碼。

Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "submit", "ShowLoading()");

現在，所有的頁面回傳本質上都必須調用onsubmit事件。它將在頁面回發完成之前顯示動畫。

來源

2012-05-10 17:40:51 BinBin

如果你真的想這麼做，那麼唯一的辦法就是網絡工作者。你可能聽說過他們，如果沒有，我認真推薦看看。

來源

2012-05-10 16:39:17

是的，啓動OnLiencClick上的startLoader（）按鈕或您用來觸發服務器端事件的任何元素，並在流程結束時從服務器端調用stopLoader（）。事情是這樣的：

//rest of the server-side code above ... 
Page.ClientScript.RegisterStartupScript(this.GetType(), "someKey", "stopLoader();", true);

來源

2012-05-10 16:40:11 Icarus

如果你不介意的瀏覽器不響應的同時，這樣做的最簡單的方法是使用GIF動畫：

訣竅是示出第e圖像開始處理時，並在完成後隱藏它。你可以在img中顯示它，並使用jQuery或任何你想顯示/隱藏它。

如果您需要瀏覽器保持響應，請使用Web Workers。但請注意，一些較舊的瀏覽器不支持它。 See this reference

來源

2012-05-10 17:06:51 JotaBe

顯示加載動畫，同時功能完成

回答

相關問題