Javascript 如何缓存图像阵列？

我正在尝试制作一个图像序列滚动网站，类似于Apple Airpod Pro

我面临一个图像加载的问题，每个图像只显示一次就会加载。 似乎我必须在dom上预加载所有图像以缓存它，这样在滚动时它看起来会很平滑

所以我在寻找一种更好的方法来缓存我的图像 这是我的图像阵列：

  const MAX = 4875; //last image number
  const PREFIX = "images/image-scroll/Test_";   //image location
  const EXT = ".jpg";   //image format
  var images = [];
  for (let i = 0; i <= MAX; i += 1) {
    images.push(
      PREFIX + ("00000" + i).slice(-5) + EXT
    );
  }

const MAX=4875//最后图像编号
const PREFIX=“图像/图像滚动/测试”//图像定位
const EXT=“.jpg”//图像格式
var图像=[]；
对于（设i=0；i一个可能的解决方案是直接调用
GET
请求到
图像URL
，而不是等待浏览器从
DOM元素调用它。这样就不会修改DOM，图像可以缓存在浏览器中

网络和缓存层的工作方式应该与将其添加到DOM中时的工作方式类似

 //Preload Images 
  jQuery('document').ready(function(){
    jQuery.each(images, function() {
      fetch(this); // uses the fetch API to do a get request. You may use the jQuery AJAX if required.
    });
  });

我尝试过你的方法，但网站速度越来越慢，显示时会再次加载图像问题可能是缓存中的图像太多。因此，缓存在几MB后会被覆盖，很快就会造成缓存丢失。你可以尝试缓存更少的图像，也可以在整个提取过程中设置100毫秒的超时，这样说，整个请求集不会同时发送
 //Preload Images 
  jQuery('document').ready(function(){
    jQuery.each(images, function() {
      fetch(this); // uses the fetch API to do a get request. You may use the jQuery AJAX if required.
    });
  });