使用javascript同步加载图像

Question

我需要同步加载图像，即我需要暂停执行javascript直到加载图像。由于image.onload是异步的，因此main函数将在加载图像之前返回。

我正在使用canvas，如果main函数在加载图像之前返回并因此被绘制，则画布中的其他内容将在图像之前绘制。这不起作用，因为在画布上绘图的顺序非常重要！

以下是我一直在做的事情：

var img = new Image();
img.onload = function() {
    //image drawing code here
}
img.src = "blahblahblah";
//function returns here, and other drawing code happens before image is drawn

有没有办法同步执行此操作，或者在从函数返回之前等待图像完全加载？

Answer 1

  

有没有办法做到这一点   同步，或等到   图像在返回之前已完全加载   从功能？

没有。 AFAIK，在Javascript中唯一可以同步完成的是同步XHR调用。

在任何情况下，你应该真正做的是建立一个实现你的依赖的回调的层次。

Answer 2

这不能通过重构来解决吗？

将图像加载到回调调用的函数中后执行需要执行的任何代码（或使该函数成为callbak）。

我看到你说如果main函数返回，其他代码就会执行。你能把它包起来吗？你能延迟它的执行还是依赖于这个onload事件或其他事件？

你甚至可以动态加载图像onload中的其他javascript代码的来源。

Answer 3

我认为你不能异步这样做，并认为如果图像文件的路径错误将会非常危险。 您必须考虑onload是一个回调函数，它将在图像完全加载时调用。

所以你必须在回调函数中执行所有绘图代码。