香草JavaScript img幻灯片w/Btn，加载img缓慢

我已经用香草JavaScript创建了一个带有按钮的图像幻灯片。当我使用按钮一段时间并加载所有图像时，图像加载速度很快。 但当我重新加载页面并尝试使用按钮加载图像时，一开始加载速度非常慢。 有办法解决这个问题吗

下面是HTML和JS

HTML

<div id="container">
  <img src="img/img1.jpeg" id="slides">
  <button class="btn" id="previous">&#10094;</button>
  <button class="btn" id="next">&#10095;</button>
  <script src="script.js"></script>
</div>

❮
❯

香草JavaScript

var i = 0;
var images = [];

images[0] = "img/img1.jpeg";
images[1] = "img/img2.jpeg";
images[2] = "img/img3.jpeg";
images[3] = "img/img4.jpeg";

var nextImage = function () {
  if (i < images.length-1) {
    i++;
  } else {
    i = 0;
  }
  document.querySelector('#slides').src = images[i];
}

var previousImage = function () {
  if (i > 0) {
    i--;
  } else {
    i = images.length - 1;
  }
  document.querySelector('#slides').src = images[i];
}

  document.querySelector('#next').addEventListener('click', nextImage);
  document.querySelector('#previous').addEventListener('click', 
  previousImage);

var i=0；
var图像=[]；
图像[0]=“img/img1.jpeg”；
图像[1]=“img/img2.jpeg”；
图像[2]=“img/img3.jpeg”；
图像[3]=“img/img4.jpeg”；
var nextImage=函数（）{
如果（i0）{
我--；
}否则{
i=图像长度-1；
}
document.querySelector（“#slides”）.src=images[i]；
}
document.querySelector（“#next”）.addEventListener（'click'，nextImage）；
document.querySelector（“#previous”）.addEventListener（'click'，
先前图像）；

---

在这个网站上，我要问的第一个问题是，如果我的表述错误，很抱歉。

通过更改图像本身的大小或文件类型，将图像优化为较小的大小。这将减少加载所需的时间

---

此外，还可以使用Javascript抢先加载图像。如果有很多图像，您可以让它在幻灯片中加载相邻的图像。

可能您的图像的分辨率超出了您的需要。如果您在普通计算机（或手机）上运行此功能，则图像大小可能在250像素左右。通过jpeg压缩和降低图像分辨率优化图像

---

阅读..

的更多信息，可能是承载图像URL的服务器速度太慢-不是JS问题优化图像。