1.02.2011

簡單的頁面加載 (Loading) 效果

頁面加載效果,也就是通常所說的 Loading 效果,能提示訪問者使其耐心等待頁面加載的完成,有效防止流量損失。

如果服務器置於國外,國內訪問可能比較慢,這時友好的頁面加載提示就非常有用。當然,通過繁雜的 Ajax 等技術,可以很好的實現。但芒果生性笨拙,只會簡單的 HTML+CSS 和僅有的幾句 JavaScript,所以此方法沒有多少技術含量。

假設需要在加載過程中,頁面右上角顯示紅色的“正在加載中…”提示信息。原理很簡單,HTML 代碼的 <body></body> 部分解釋前插入此提示信息,解釋完成後隱藏它即可。

首先,在 <body> 標記後插入:

<div id="loading">頁面加載中...</div>

你可以自由定義 loading 這個 id 的樣式。芒果將其設置為紅色背景,白色文字:

#loading{font-size:12px;color:#FFFFFF;background:#FF0000;
position:absolute;top:0px;right:0px;padding:2px 10px 2px
10px;}

最後,用 JavaScript 代碼輸出樣式,在 </body> 標記前將其隱藏:

<script type="text/javascript">document.write('<style>
#loading{display:none;}</style>');</script>

對於 WordPress 用戶而言,使用過多插件會導致頁面加載速度嚴重減緩。如果這樣,不妨試試這個簡單的方法。

0 留言:

發佈留言

您使用留言則表示同意及遵守使用條款及守則

建議: 為方便留言回覆,請不要用匿名方式 留言。