不需要新瀏覽器支援APNG
你也可以做到的PNG動畫
使用javascript!
秘密就是這個…
看了上圖大概就猜出來啦…
其實是利用PNG本身半透明的特性，搭配改變CSS背景座標
這邊我們需要用到一個Timer來執行重複的動作
該區塊的CSS必須設定長寬，並且加入overflow:hidden，隱藏住不必要的地方，圖片本身預設是repeatable的，如下
#loading{
background: url(loading.png);
height: 40px;
width: 40px;
overflow: hidden;
}
然後是javascript的部分，這邊使用jquery
每隔一段時間改變背景座標的參考點就可以了
$(document).ready(function(){
load_img_show();
});
var load_img_pos = 0;
function load_img_show() {
$("#loading").css("background-position","0 "+load_img_pos+"px");
load_img_pos = load_img_pos-40;
//每隔0.1秒就跑一次
setTimeout("load_img_show()",100);
}
其實是看到jQuery FancyBox的效果，一直想不透如何造出邊緣這麼滑順的gif動畫，甚至還有半透明咧，死命用firebug搜出圖檔來後馬上就恍然大悟了XD
以後AjaxLoading的畫面再也不需要用到邊緣破破的gif囉
