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