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

Question

如果您制作新图像并定义来源，您需要预加载吗？例如：

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

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

谢谢

Answer 1

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

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

基于以下信息：是否应立即将图像 src 设置为数据 URL？

忽略以下建议（它仍然为我的回答提供上下文）：

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

因为变量赋值是同步的，所以后面的代码可以使用图像。

预加载的重点是图像通常位于服务器上的不同位置，并且单独文件的加载通常是异步的，因此您确保脚本等待下载图像。通过内联创建图像，您实际上将其存储在 JavaScript 文件中，并且将同时下载。