Question

您好我有以下功能

render = function ( ctx, img, W, H ) {
  ctx.drawImage(img, 0, 0, W, H, 0, 0, W, H);
}

我从另一个函数调用该函数

renderImage(ctx, img, width, height);
for(var i = 0; i < 10000000 ; i++) {
    // en expensive for loop
}

在for循环完成执行之前，我在图像中遇到的问题不会在浏览器中加载，但是不清楚为什么图像等待加载直到for循环结束。有人可以帮忙吗？如何在不等待循环完成执行的情况下加载它？

Answer 1

JavaScript是单线程的，因此在循环运行时阻止浏览器更新屏幕。

要解决，请使用延迟让浏览器呼吸一下。这当然会使代码运行异步，因此根据代码的下一步行动可能需要回调机制。

示例：

renderImage(ctx, img, width, height); setTimeout(function() { for(var i = 0; i < 10000000 ; i++) { // en expensive for loop } // call next step }, 9); // delay some arbitrary ms

如果循环长时间运行，您可以考虑将其拆分为多个细分或使用WebWorker。

有关如何拆分循环，请参阅以下答案：

Why is this for loop blocking if it is called afterwards?

Converting Uint8Array crashing browser for large files

额外提示：您不必使用剪裁参数来绘制已调整大小的图像，只需提供宽度和高度：

ctx.drawImage(img, 0, 0, W, H);

Answer 2

您是否尝试先加载图像，然后运行绘图？

var img = new Image();
var i = 0;
img.onload = function(){
    //draw...
    animate();
};
img.src = 'source.jpg';
function animate(){
    if(i<10000000) {
        requestAnimationFrame(animate);
        render();
    }
}

function render(){
    //draw
}

画布绘制图像被其下方的代码阻止

2 个答案: