iphone html動畫？

Question

我使用NimbleKit構建了一個html本機iPhone應用程序，其中一部分涉及動畫。我建立了一個包含動畫的320 x 48像素的png序列，並使用javascript循環播放它。這裏是一個快速和骯髒的代碼

 var pic = 0; 
    function stamp(){ 
     //alert("animated"); 
     //alert("Stamp"); 
     var image; 
     if(pic<=48){ 
     image = "url('Animations/Smiley/"+pic+".png')"; 
     $('#animation').css("background-image",image); 
     pic++; 
     } 

    } 
    function beginStamp(){ 
     var stamp = window.setInterval("stamp()", 33.33); 
     window.setTimeout("clearIt()", 1599.84); 
    } 

    function clearIt(){ 

     window.clearInterval(stamp); 
     $('#animation').css("z-index",0); 

    } 

    var animated = setTimeout("animate()",600); 
    var start = setTimeout("beginStamp()",1600); 

問題是，動畫是非常波濤洶涌，一噸。所有的圖片都在本地存儲，所以它不是網絡速度/下載問題。第一次運行後，動畫運行更順暢，它是否被緩存？仍然有很多閃爍。有沒有人知道如何解決這個問題，或者使用html，css，js，query和nimble kit sdk來做一個更好的方法（因爲我確定有一個方法）來執行移動優化的迭代動畫？謝謝！

Answer 1

儘管圖片是本地的，但它仍然需要將它們加載到內存中 - 即當您將background-image css規則指向新的URL時，它會檢查是否已加載所需資源 - 如果不是，則需要在渲染之前讀取圖像文件，這需要一點時間。這可能是問題所在。

嘗試首先加載所有的圖像，當程序加載時，然後當你想第一次顯示給用戶應該是好的。您應該可以通過運行上面的代碼來啓動隱藏的圖像。