Tool Pages

jQuery custom loading icon

Blogger gears logo
上次提到網頁加載時的jQuery等待效果 (Loading effect), 不知道是我寫得太粗略; 抑或示範太多容易讓人混淆? 其實它的架構簡單極了! 不要被一堆CSS語法給蒙蔽, 就誤以為很難. 所以這次採用最簡單的單一圖片當作示範主體, 應該許多部落客會希望放上具有個人風格的載入效果.

事前準備：一張logo圖片. 無論是 jpg、png 或 gif 格式皆可, 檔案盡量壓縮成小一點; 加載的檔案太大可能會讓訪客討厭.
此次的範例圖片使用 Blogger 動態模組的 gif 圖片. var types=[BootstrapDialog.TYPE_PRIMARY];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Suggestion',message:'圖片尺寸適中為佳, 沒有影像編修軟體自訂壓縮輸出, 可使用免費的線上壓縮服務的網頁. Google 搜尋關鍵字即可.
但如果壓縮得太過頭以至於模糊或品質粗糙也不好, 這張圖片可說是網站的門面. 選擇一張代表性的圖片令人印象深刻, 手繪質感或個人頭像是不錯的選擇.',buttons:[{id:'btn-ok',label:' OK',cssClass:'btn-primary',autospin:false,action:function(dialogRef){dialogRef.close()}}]});});

blogger gears logo

打開CSS, 將以下的程式碼放在 <body> 下方. 因為是載入優先, 所以安裝的位置較上方.
<!-- Loading Start -->
<style>
.dt-loading{background:rgba(255,255,255,0.8)repeat;width:100%;height:100%;z-index:101;text-align:center;position:fixed;top:0;bottom:0;left:0;right:0;padding:20% 0}
</style>
<div class="dt-loading">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQt6fYC-AFxyl0i9cfG5gK32HfZBSYr1WuA2rADzy1X10w9iU7OxheeDqPg1th0Q7AXSCg6MH9PZCeXvSfHOCuwpCcgU3zAQnVMMuskU0WshHnM1A68aHkD8iWN8DUQMM6M-zPej71A_L/s1600/gear.gif" width="100" height="100"></img>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>setTimeout(function(){$(".dt-loading").fadeOut('slow');},5000);</script>
<!-- End -->

rgba (255,255,255,0.8)：範例是白色背景, 透明度背景要改成黑色系則改為 rgba (0,0,0,0.8)
padding: 20% 0：調整圖片高度. 如logo採用垂直長形的圖樣, 將 padding 的數值改小以符合視窗比例. 因此, 圖片面積過大也不是件好事.
綠字的圖片網址換成你的圖片網址, 當然 width、height 也要變更尺寸.
5000：相當於5秒.
已有使用 jquery.min.js 則刪除該行, 無需重複安裝jQuery函式庫.
這樣就完成, 很簡單, 對吧!