事前準備：一張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()}}]});});
打開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函式庫.
這樣就完成, 很簡單, 對吧!
Author Summary
Subject : jQuery custom loading icon
Author : - Dream Talker Updated at: 10:46 PM
Votes : - 5.0 - based on 2015
網頁加載時的jQuery等待效果, 自訂logo圖片載入
Author : - Dream Talker Updated at: 10:46 PM
Votes : - 5.0 - based on 2015
網頁加載時的jQuery等待效果, 自訂logo圖片載入
5 Stars - Reviews
我的博客可以看見效果，但是圖片有矩形白色背景，請問是我哪一段語法改錯了。
ReplyDelete應該是原圖就沒有去背成為透明背景的關係. 請將白色背景去除後儲存為 png 或 gif 檔案.
Delete如果沒有修圖軟體, 可以參考線上編修工具; 雖然不能作到細膩的去背效果, 對單純的背景色應該夠用. 例如： Clipping Magic 或是能處理較細膩複雜圖形的 http://pixlr.com
多謝你還幫我找到改圖工具。
Delete