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加载image()元素数组，然后以幻灯片形式显示它们。

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"/>

javascript - 如何将图像存储在内存中并从缓存中的内存中加载它们？

1 个答案: