如果使用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文件中，并且可以同时下载它。