在網頁中顯示「載入中請稍候」提示訊息

我最近在開發一個商務網站,不過卻發現網頁載入時間過長的問題。剛好想起前一陣子在討論區裡有人問到這個問題,於是就拿來實驗一下,結果成績非常理想,特別在此跟大家分享。在這裡我並沒用到 Ajax 技術...

我最近在開發一個商務網站,不過卻發現網頁載入時間過長的問題。剛好想起前一陣子在討論區裡有人問到這個問題,於是就拿來實驗一下,結果成績非常理想,特別在此跟大家分享。在這裡我並沒用到 Ajax 技術。如果使用 Ajax 技術,也可以做得非常的簡單,只需在網頁中加上 ProgressBar 或類似的控制項即可。

 

想不使用 Ajax 技術而達到類似的效果(雖然原理差不了多少),你可以使用 Page.Response.Buffer 功能。我把 Page.Load 事件程式改成如下:

Protected Sub Page_Load(...) Handles Me.Load
   Is Not IsPostBack Then
      Page.Response.Buffer = True
   End If
End Sub

你也可以不需寫在 Page.Load 事件中,寫在 .aspx 的 @Page 行也可以,例如:

<%@ Page ... Buffer="True" ... %> 

這麼做可以讓 Page 的輸出使用既有的資料,直到使用者下達 Response.Flush 指令為止。

那麼要在哪裡下達這個指令呢?當然,最理想的情況應該要在網頁 Render 完畢之後再來做。不過我們並無法直接去覆寫 RenderComplete 事件,所以我認為寫在 Page.Unload 事件應該是最好的。很可惜,在 Unload 事件裡已經不能處理任何 Response 指令,所以我挑選了 Page.SaveStateComplete 事件(關於網頁生命週期,你可以參考「ASP.NET 網頁事件生命週期總覽」一文):

Protected Sub Page_SaveStateComplete(...) Handles Me.SaveStateComplete
   Page.Response.Flush()
End Sub

到這裡為止,才短短兩個步驟,你已經可以看出網頁在重載的過程中,再也不會看到白慘慘的畫面了。

不過這麼做有個缺點,就是因為畫面並沒有太明顯的改變(尤其若沒有注意到狀態列的話),使用者有可能以為剛才按下按鈕或任何控制項的動作沒有生效,而再去按它一次,甚至重複的按。因此,我們最好設計一道訊息告知使用者網頁在重新載入中,讓他們知道重載已在進行。

要達到這個目的,我們必須把 JavaScript 請出來,寫一道簡短的指令。不過在那之前,我們最好把要顯示的訊息寫好:

<div id="LoadingMessage" style='display:none;'>網頁載入中,請稍候...</div>

再把 JavaScript 準備好:

<script language="JavaScript" type="text/javascript">

   function ShowLoadingMessage() {
      document.getElementById("LoadingMessage").style.display="block";
   }

</script>

最後,我們在會觸發 PostBack 的所有控制項加上 OnClientClick 程序如下:

<asp:Button ... OnClientClick="ShowLoadingMessage();" />

這麼一來,當你按下這個按鈕時,那道訊息就會出現,等到網頁又載入時,那道訊息就又自動消失。

你並不一定要使用 display=none/block 樣式,使用 visibility=visible/hidden 也可以,差別在後者會預先佔用位置而前者不會。


Dev 2Share @ 點部落