轮播图回到起始位置时图片加载缓慢的Javascript问题求助

我写了一套轮播图代码，每次轮播回到起始位置时，图片加载耗时极久，同时JavaScript也无法正常重新加载图片。我尝试用$(document).ready(function(){})包裹JS代码，但问题仍未解决。

我的实现代码 #

HTML代码 #

<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2154565863/settings_images/1376bf3-356e-dbb-540-72f5f6572cc_1.png" style="width:100%">
  </div>
  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2154565863/settings_images/850fa1e-828-aaf3-d3f-08f588ecb1d_3.png" style="width:100%">
  </div>
  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2154565863/settings_images/b41302b-fa7b-d6f-2655-e8385f7a3c1_2.png" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(0)"></span>
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
</div>

JavaScript代码 #

let slideIndex = 0;
let timeoutId = null;
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");

showSlides();
function currentSlide(index) {
     slideIndex = index;
     showSlides();
}
function plusSlides(step) {
  
  if(step < 0) {
      slideIndex -= 2;
      
      if(slideIndex < 0) {
        slideIndex = slides.length - 1;
      }
  }
  
  showSlides();
}
function showSlides() {
  for(let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    dots[i].classList.remove('active');
  }
  slideIndex++;
  if(slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].classList.add('active');
   if(timeoutId) {
      clearTimeout(timeoutId);
   }
  timeoutId = setTimeout(showSlides, 5000); // Change image every 5 seconds
}

我尝试添加的代码 #

$(document).ready(function() {
    <<JAVASCRIPT>>
});

问题原因及修复方案 #

核心问题 #

1. 索引逻辑混乱：原代码混用1-based和0-based索引，plusSlides的索引计算逻辑错误，容易导致轮播时显示异常；
2. 图片未预加载：初始仅加载当前显示的图片，其余图片首次轮播到才开始请求，若未被浏览器缓存，回到起始位置时会重新加载，导致耗时久；
3. jQuery依赖问题：若页面未引入jQuery库，$(document).ready代码会直接报错，导致JS无法正常执行。

修正后的完整代码 #

let slideIndex = 0;
let timeoutId = null;
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");

// 预加载所有轮播图片，避免切换时加载延迟
function preloadImages() {
  for (let i = 0; i < slides.length; i++) {
    const imgElement = slides[i].querySelector('img');
    const preloadImg = new Image();
    preloadImg.src = imgElement.src;
  }
}

// 初始化轮播
function initSlideshow() {
  preloadImages();
  showSlides();
}

function currentSlide(index) {
  slideIndex = index;
  showSlides();
}

function plusSlides(step) {
  slideIndex += step;
  // 处理索引边界，保持在0到幻灯片数量-1之间
  if (slideIndex < 0) {
    slideIndex = slides.length - 1;
  } else if (slideIndex >= slides.length) {
    slideIndex = 0;
  }
  showSlides();
}

function showSlides() {
  // 隐藏所有幻灯片，移除指示器激活状态
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    dots[i].classList.remove('active');
  }
  // 显示当前幻灯片，添加指示器激活状态
  slides[slideIndex].style.display = "block";
  dots[slideIndex].classList.add('active');
  // 清除旧定时器，设置新的自动轮播定时器
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = setTimeout(() => plusSlides(1), 5000);
}

// 原生JS监听DOM加载完成，替代jQuery的ready，无需额外依赖
document.addEventListener('DOMContentLoaded', initSlideshow);

关键修正点 #

• 统一使用0-based索引，简化逻辑避免换算错误；
• 添加图片预加载函数，提前加载所有轮播图片；
• 重写plusSlides的索引计算逻辑，直接处理边界情况；
• 用原生DOMContentLoaded替代jQuery，消除库依赖；
• 定时器回调改为调用plusSlides(1)，保持索引逻辑一致。

内容的提问来源于stack exchange，提问作者Jessica Roberts