Javascript - 在将图像绘制到画布时加载冻结的 GIF (Phonegap/Cordova)答案

【问题标题】：Javascript - loading GIF freezed while drawing image to canvas (Phonegap/Cordova)Javascript - 在将图像绘制到画布时加载冻结的 GIF (Phonegap/Cordova)
【发布时间】：2015-03-10 02:41:51
【问题描述】：

当我在画布上绘制图像时，加载 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 上测试）

【问题讨论】：

标签： javascript cordova canvas loading gif

【解决方案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

【讨论】：