因為本站內容大部份為圖檔或外嵌程式，所以在開啟載入時容易造成延遲！雖然已力求精簡，不過並沒有太顯著的成效，就這個部份對來訪者而言，確是需要改善的部份。
後來想到用提示訊息的方式，同時參考了這篇：给页面加上Loading效果最简单实用的办法 ，這樣至少能在網頁下載的同時，提示來訪者略為等待。
一、編輯Blogger版面配置（HTML），加入以下CSS代碼於header-wrapper之前。
#loading
{
background: #df0101;
color: #ffffff;
float: left;
font: 80% "Lucida Sans Unicode"eam Vera Sans";
font-weight: bold;
margin: 0px auto auto 0px;
padding:5px;
position:fixed;
}
二、將藍色代碼置於<body>後第一行，紅色Loading…依喜好自行設定。
<body>
<div id='loading'>Loading ...</div>
網頁內容……
三、以及</body>之前的最後一行
……網頁內容
<script>document.write('<style>#loading{display:none}<\/style>');</script>
</body>
如果BSP、或樣版檔語法的限制無法不能加入最後一行，可用新增 HTML/JavaScript 網頁元素(自由欄位）方式，貼入以下代碼，並置於網頁最下方，或最後程式碼最後載入區塊。
<script>document.write('<style>#loading{display:none}<\/style>');</script>
另一個方式，也可以用動態的 .gif 圖取代單調的文字。
首先簡化原來的CSS代碼…
#loading
{
float: left;
width: 100%;/*水平置中*/
margin: 300px auto auto 0px;/*自定垂直高度*/
position:fixed; /*浮動*/
}
接下來取代原來的Loading文字
<body>
<div id='loading'><img src="http://自設圖檔連結路徑"></div>
網頁內容……
最後就會依每個頁面載入的時間長短，在畫面中間出現類似畫面。
我以實用性的功能為考量，經調整測試後把結果貼上來，目前在IE8／Firefox／Chromium都能正常顯示，有興趣的也可以試試看。或您有更好的解決方案，也希望互相切搓。
Loading
訂閱：
張貼留言
(
Atom
)
| |
 |
 |
 |
 |
精選文章
動力與能源
往復式活塞機構是個有趣的機械裝置，它可以由轉軸方向施與動力來驅動活塞，同時藉由被動的瓣膜閉合導引空氣進出，以達到壓縮及儲存空氣的功能。 反之，若把被動式的瓣膜改為可主動控制的汽門，並在密閉的缸體內注入高壓(爆炸)氣體時，便能推動活塞往復來回，將直線運動轉換為軸向運動成為動...
發表文章
0 意見 :
張貼留言
1.請在此發表和本文相關的意見，更歡迎不吝給予批評與指教。
2.你可以用匿名的方式發表，但我保留刪除與回覆之權利。
3.參閱版規、授權聲明，或其他問題請前往這裏留言！