[RPG] fix chrome restart gif animate

動畫用 GIF 在呈現上好做多了～重點是美觀 Q__Q

在互動 click 時，就讓他跑一下 GIF...
gif restart 的用法，原則上就是
$('#imgXXX').attr('src', 'imgs/XXXX.gif');

不過～試著試著...發現 chrome 有點 bug...Orz...
（講好聽點是設計理念不同...但在我的情況看起來就是bugg...）

這問題曾出在
http://www.realmofprogrammersgamble.website/journal/ch1/jourif2.html
切換語系，重現劇情...
人在走的時後的動畫

http://www.realmofprogrammersgamble.website/imgs/event1/walk.gif

這個問題會發生在，GIF loop=1 的情況（通常gif 不重複 repeat != infinite，就是loop=1）
配合 Chrome 的加持就會出現...

GIF 只會在一開始的時後，乖乖的跑一次動畫...
之後你再重設 src/background 的 gif 時，他會一直定格在最後的 frame 上
（看起來就是不會動了Orz）

查網路出來有蠻多說法～和解法～

有人是用 src=XXXXX.gif?Time=new Date()
這個是有效的～強迫chrome 不要cache...
但是缺點在於 網路會一直去server 要新圖片，吃我的頻寬（＄）
還有 網路傳輸延遲的問題...

最後找到一篇～其實之前已經試了很多說法，都是死馬當活馬醫...
但是看到的當下也是挺傻眼的XD...（原來降子也行！）
這招真的挺妙的就是～有種騙瀏覽器的感覺XDXD...
http://stackoverflow.com/questions/10730212/proper-way-to-reset-a-gif-animation-with-displaynone-on-chrome

簡單的說就是～ setTimeout 延遲一下下去 load 圖檔...
（話說這篇的點閱打勾還真的不高...）
是說延遲的部份，似乎會看該gif的大小，就gif檔越大，延遲要久一點才會出來～
（就當是圖檔重新下載的時間吧O_oa）

為了讓動畫看起來 smooth 一點，我稍為改進了一下，（直接display block，他開頭還是會有前面最後一格(setTimeout還是有delay，不管設多短 )，感覺會跳，所以再用 opacity 騙一下眼睛）

        // GIF restart
$('#img_g1').css('display', 'block');
        // 透明度0，就不會看到之前的最後 frame 內容
$('#img_g1').css('opacity', '0');
        // setTimeout 解決 chrome 不重跑 gif 的 frame
var ta = setTimeout(function()  {
$('#img_g1').attr('src', '/imgs/event1/walk.gif');
                // 他重跑時才看得到
$('#img_g1').css('opacity', '1');
}, 10);

        // 這段是讓動畫跑完就關掉了
var tb = setTimeout(function()  {
$('#img_g1').css('display', 'none');
$('#img_g1').css('opacity', '0');
}, 2500);