[英]Javascript - loading GIF freezed while drawing image to canvas (Phonegap/Cordova)
While i draw image to canvas, loading gif won't animate on phonegap/cordova, the code looks like this: 当我在画布上绘制图像时,加载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');
};
I also tried replacing animated gif with css animation, but its exactly the same, the browser refuses to animate anything while drawing the canvas 我也尝试用CSS动画替换gif动画,但是完全一样,浏览器在绘制画布时拒绝为任何动画设置动画
Any help appreciated 任何帮助表示赞赏
NB: it happens not on desktop but only in cordova/phonegap, i guess the cause is lack of hardware performance on mobile (tested on Android tablet 4.1) 注意:它不是在台式机上发生,而是在cordova / phonegap上发生,我想原因是移动设备缺乏硬件性能(在Android平板电脑4.1上测试)
Try increasing the delay. 尝试增加延迟。 A delay of 0 doesn't really help much as there is not enough time for some browser to do anything else.
延迟0并没有太大帮助,因为某些浏览器没有足够的时间执行其他任何操作。 Give a frame or so.
给一个框架左右。 Also continue from inside the callback as it is asynchronous:
还应从回调内部继续进行,因为它是异步的:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.