Javascript-预加载的图像延迟渲染（仅第一次）

我使用以下代码预加载图像：

var image = new Image();
image.addEventListener("load", loadHandler, false);
image.src = "someImage.png";

function loadHandler()
{
  // the programme continues
}

让我们说图像指的是在游戏中间出现的某个按钮。

问题是当第一次渲染图像时（使用drawImage函数），代码会等待几秒钟。所有其他用法（意味着图像应该在另一时间显示）都是即时的

---

图像是一张精灵纸，大小约为3MB。所有内容都在本地计算机上。

如果我正确理解了您的问题，那么问题不在于加载，而在于渲染精灵（相当大）

将其插入

文档中（无论您想在哪里），然后等待加载，然后再执行其他操作，这可能会有所帮助

您可以借助
不透明度
、
可见性
等属性将其隐藏起来（任何选择都可以做到这一点）

如果您的目标浏览器支持它，您也可以使用它。
这正是您的代码应该做的。你期望什么，有什么问题吗？对不起，也许我说错了。loadHandler函数位于代码的开头，在加载映像之前，它将停止。没关系。但是，在图像加载后，代码继续进行，然后在游戏的中间停止，当第一次绘制图像时。然而，第二场平局和所有其他的平局都是毫不犹豫地完成的，没有必要感到遗憾。只是不清楚你预期会发生什么。什么时候运行预加载代码？为了解决这个问题，我在代码的开头画了一部分图像（初始化变量等）——只是图像的一小部分，但它很有帮助。因此，第一次抽签——以及等待的几秒钟——是在游戏开始时完成的，所以看起来游戏的设置只需要多一点时间。但这不是一个系统解决方案：（听起来好像预加载不起作用。你确定预加载的图像源和以后调用的图像源完全相同（相同的域，没有查询字符串）？打开开发工具中的“网络”选项卡，看看它们是否相同。