javascript - 如果您使用 base64 编码图像，是否需要预加载图像？

Question

如果你制作了一个新图像并定义了源，你需要预加载吗？例如:

var image = new Image();
image.src = 'data:image/jpeg;base64,/9j/4Q+sRXhpZgAATU0AKgAAAAgABw...';
// Append image to canvas.

我一直在做一些测试，但我宁愿有可靠的证据，所以链接会很好。

谢谢

Answer 1

编辑: 实际上，我可能错了，显然不同的浏览器在这方面的行为不同，尽管图像的宽度和高度等信息可用，但不一定可用。我假设这是因为计算此信息的浏览器函数是非阻塞的，并且假设您正在收听 onload。

所以是的，监听 onload 事件以确保用户浏览器在尝试使用动态图像之前已将其加载。

基于以下信息:Should setting an image src to data URL be available immediately?

忽略以下建议(它仍然为我的回答提供上下文):

通过将其存储为变量，您可以预加载它。预加载图像时发生的所有事情是检索和存储它的数据。您已经将其数据存储在一个变量中 - 需要预加载什么？

因为变量赋值是同步的，所以图像将可用于您随后的代码。

预加载的全部意义在于图像通常位于服务器上的不同位置，并且单独文件的加载通常是异步的，因此您可以确保脚本等待图像下载。通过内联创建图像，您可以有效地将其存储在 JavaScript 文件中，并且会同时下载。