JavaScript - 如何将图片存储在内存中并从内存中加载，而不是从缓存中加载？

Question

我现在正在使用以下函数将图像预加载到缓存中。我想知道是否有可能从内存中加载它们，以实现更快的加载时间。

function preloadImage (done, i) {
    if (!i) { i = 1; }

    var img = new Image();
    img.onloadend = function () {
        if (this.height == 0) { return done(); }
        preloadImage(done, i + 1);
    };
    img.src = "images/" + i;
}

preloadImage(function () { console.log('images loaded'); });

我想做的是使用JavaScript加载图像()元素数组，然后在幻灯片中显示它们。

- tgwtdt

---

你可以尝试使用localStorage。在该示例中，localStorage被用于将图像传递到下一页：你可以尝试将其用于你需要的地方：https://dev59.com/DGIk5IYBdhLWcg3wiuqk - debe

我想使用内存而不是磁盘。 - tgwtdt

感谢您的提问，祝您在图像动画项目中好运。 - Patrick Roberts

Answer 1

以下是如何在预取后直接将Image对象放入DOM中，而无需使用src重新加载：

// wait 2 seconds
setTimeout(() => {
  // preload image
  var image = new Image();

  image.addEventListener('load', function () {
    // place into DOM
    // assert(this === image);
    document.querySelector('img').replaceWith(this);
  });

  image.src = 'https://www.w3schools.com/w3css/img_lights.jpg';
}, 2000);

<img src="https://www.w3schools.com/howto/img_fjords.jpg"/>

- Patrick Roberts

---

这仍然不是非常有帮助，因为他问的是你是否可以从内存中加载它 - 这仍然需要另一个网站作为源，并且无法解决如果图像是从API或代码加载的压缩文件等情况。在这种情况下，你仍然需要将所有内容写入磁盘以获得有效的源路径。 - undefined

@Arcsector实际上不需要那些。你当然可以从内存中创建一个Image实例，但这超出了问题的范围。重点是如何直接使用预加载的Image实例，而不管它来自何处。 - undefined