jQuery custom loading icon

3   Comments

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="http://4.bp.blogspot.com/-TgXhwExNPGU/UtIJDH24DZI/AAAAAAAAE0Q/1_NoNhPP4T8/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函式庫.
這樣就完成, 很簡單, 對吧!



Author Summary
jQuery custom loading icon
Subject : jQuery custom loading icon
Author : - Dream Talker Updated at: 10:46 PM
Votes : 100% - 5.0 - based on 2015
網頁加載時的jQuery等待效果, 自訂logo圖片載入
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 我的博客可以看見效果,但是圖片有矩形白色背景,請問是我哪一段語法改錯了。

    ReplyDelete
    Replies
    1. 應該是原圖就沒有去背成為透明背景的關係. 請將白色背景去除後儲存為 png 或 gif 檔案.
      如果沒有修圖軟體, 可以參考線上編修工具; 雖然不能作到細膩的去背效果, 對單純的背景色應該夠用. 例如: Clipping Magic 或是能處理較細膩複雜圖形的 http://pixlr.com

      Delete
    2. 多謝你還幫我找到改圖工具。

      Delete