一个img数组，轮播一遍后，重复发送请求

Question

现在有个轮播图，三秒切换一次src，向服务器发送请求。但是图片会一直发送请求，

我是想几张图片轮播完不要再请求了，有什么优化的办法吗？

Answer 1

并没有发请求，直接从磁盘缓存里读的。

如果连这个你都不想要，那你应该用多个 img 承载不同的图片，而不是每次都给同一个 img 重新赋值 src。

Answer 2

直接打开控制台，复制代码就可以运行，看当前网页的最下页：

// 图片地址
const urls = ['https://cdn.segmentfault.com/r-826b836d/static/logo-b.d865fc97.svg', 'https://cdn.segmentfault.com/r-826b836d/static/bg-169.62e63408.svg'];
// 初始化多个 图片
const images = urls.map(src => {
  const el = document.createElement('img');
  el.setAttribute('src', src);
  el.setAttribute('alt', 'Image');
  return el;
});
// 图片的容器
const container = document.createElement('div');
document.body.appendChild(container);
// 当前的图片
let currentImageIndex = 0;
const loop = () => {
  // 将当前图片添加至容器
  container.appendChild(images[currentImageIndex]);
  setTimeout(() => {
    // 移除当前图片
    container.removeChild(images[currentImageIndex]);
    // 获得下一张图片
    currentImageIndex+= 1;
    if (currentImageIndex === images.length) {
      currentImageIndex = 0
    }
    // 循环
    loop();
  }, 3000)
}
loop();

Answer 3

也可以将图片获取到然后转成 base64

Answer 4

把代码发一下，不要截图