Javascript - 加载GIF冻结，同时将图像绘制到画布(Phonegap/Cordova）

Javascript - loading GIF freezed while drawing image to canvas (Phonegap/Cordova)

本文关键字：Phonegap Cordova 绘制 图像 GIF 加载 冻结 Javascript      更新时间：2023-09-26

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

尝试增加延迟。延迟 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
相关文章：