Javascript-將圖像繪制到畫布時凍結了加載GIF（Phonegap / Cordova）

Question

當我在畫布上繪制圖像時，加載gif不會在phonegap / cordova上進行動畫處理，代碼如下所示：

.hide{
display:none;
}
.absolute{
position:absolute;
}


<div id="loading" class="hide absolute">
<img src="loading.gif"/>
</div>

var drawCanvas = function (img) {

 var element = document.getElementById('loading')
     canvas = document.getElementById('canvas')
     context = canvas.getContext('2d');

     element.classList.remove('hide');

     setTimeout(function () {

      context.drawImage(img,0,0);
     }, 0);

     element.classList.add('hide');
};

我也嘗試用CSS動畫替換gif動畫，但是完全一樣，瀏覽器在繪制畫布時拒絕為任何動畫設置動畫

任何幫助表示贊賞

注意：它不是在台式機上發生，而是在cordova / phonegap上發生，我想原因是移動設備缺乏硬件性能（在Android平板電腦4.1上測試）

Answer 1

嘗試增加延遲。 延遲0並沒有太大幫助，因為某些瀏覽器沒有足夠的時間執行其他任何操作。 給一個框架左右。 還應從回調內部繼續進行，因為它是異步的：

setTimeout(function () {
    context.drawImage(img,0,0);
    element.classList.add('hide');  // you'll probably like this to be here
}, 17);  // 17ms ~16.667ms as one frame takes @ 60 fps