Javascript - 预加载的图像渲染得很晚（仅限第一次）

Question

我使用此代码预加载图像：

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

function loadHandler()
{
  // the programme continues
}

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

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

图像是精灵表，大小约3 MB。本地计算机上的所有内容。

Answer 1

如果我理解你的问题，那不是关于加载，而是更多关于渲染精灵（这是非常大的）。

将其插入document（您想要的任何地方）可能会有所帮助，然后在执行任何其他操作之前等待它加载。

您可以在opacity，visibility等属性的帮助下隐藏它（任何选择都应该有效）。

如果您的目标浏览器支持它，您也可以使用link prefetching。