javascript - 如果不在缓存中，则 JS 新图像

Question

我正在通过 XHR 加载一些图像并将它们作为画布元素上的序列播放。

我先预加载图像，然后在预加载所有图像后调用每张图像

const im = new Image();
im.src = image;
ctx.drawImage(im ,0,0);  

其中图像是一个 blob url

问题是，当动画循环播放时，浏览器会为每一帧发出新的请求。由于图像被缓存，它不需要时间，但会不断构建数千个请求。

我仍然无法将 blob url 传递给画布，因为它不支持它，如果我尝试路径实际的图像 url，它不起作用，因为这些 url 没有预加载，只有 blob url。

如果缓存了 src url，有没有办法用 new Image() 省略请求？

谢谢

PS澄清

由于图像是第一次预加载，它们实际上是预加载的

当我调用 new Image() 并将 blobUrls 作为 src 传递时，它们是从缓存中加载的

标签： javascriptcanvasblobpreload