動態載入圖示 Animated Logo

今天才知道, 原來常見的動態載入小圖示, 如圖:







有個名字, 叫做 Throbber

還有網站可以幫忙製作呢.


搭配 jQuery 的 BlockUI Plugin
可以很快做出不錯的效果.

範例如下:

$.blockUI({ message: '<h3><img src="/images/ajax-loader.gif" /> Please wait...</h3>' });

實際操作的時候, 發現圖常常出不來, 應是圖片載入過慢, 需將圖檔做預載(pre-load)處理, 作法如下:

$(document).ready(function() {
throbber = new Image() ;
throbber.src = "/images/ajax-loader.gif" ;
}) ;