使用 javascript 同步加载图像答案

【问题标题】：Loading images synchronously with javascript使用 javascript 同步加载图像
【发布时间】：2010-11-12 02:22:16
【问题描述】：

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

我用的是canvas，如果main函数在图片加载之前就返回了，因此绘制出来了，canvas中的其他东西会在图片之前绘制。这不起作用，因为在画布上绘图的顺序非常重要！

这是我一直在做的：

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

有没有办法同步执行此操作，或者等到图像完全加载后再从函数返回？

【问题讨论】：

标签： javascript ajax image canvas

【解决方案1】：

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

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

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

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

【讨论】：

理论上可能。在实践中，并非如此。从本质上讲，在画布上绘图是一系列有序的步骤，必须一个接一个地发生。您可以通过递减的回调阶梯强制这种情况发生，但是......真的......在高度同步的过程中使用异步步骤非常糟糕。装配线的一个阶段与其他所有工作超时，导致堵塞......

【解决方案2】：

我不认为你可以异步进行，并且认为如果图像文件的路径错误会非常冒险。您必须考虑到 onload 是一个回调，它将在图像完全加载时调用。

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

【讨论】：

【解决方案3】：

有没有办法做到这一点同步，或等到图像在返回之前已完全加载来自函数？

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

在任何情况下，您真正应该做的是设置实现您的依赖关系的回调层次结构。

【讨论】：

我有一个非常大的循环在画布上进行大量绘图，并且在加载图像时很难使循环暂停，这正是我所需要的。如果我使用 image.onload 回调，图像将在循环中的其他内容之后绘制。这会导致图像出现在它应该在后面的东西的前面。
在开始图像加载的函数中，作为最后一件事，使用 setInterval 启动一个函数，该函数关闭一个对象，该对象也被您的 image.onload 回调关闭。在设置特定标志之前，“间隔”函数应该什么都不做。该标志应该由您的 image.onload 回调设置。当它找到标志集时，“interval”函数应该调用下一段代码；绘制在“背景”图像之上的代码。
你不能让它暂停，你必须把这个想法从你的脑海中清除。
好的。那么如果只是循环的下一次迭代，我将如何调用下一段代码？
您不能将其保留为内联循环。您必须将代码转换为异步的。一种类似循环的模式是递归。您可以通过调用 setTimeout(myself, timeout) 作为递归函数中的最后一件事来计时对该函数的调用（也允许您避开堆栈限制）。