javascript - 如何正确使用 onload 方法使我的幻灯片切换仅在图像加载延迟加载时滑动？

Question

要继续我的上一个问题，我想让我的幻灯片仅在图片加载后更改幻灯片。我尝试了以下方法，但它似乎没有按预期工作，因为它只是在开始时跳过幻灯片：

HTML：

<div style="margin-bottom: 30px;">
<img class="slider" src="graphics/slider1.webp" onload="changeSlide(1);">
<div class="slider-text" id="slidert1">Text here.</div>
<img loading="lazy" class="slider" src="graphics/slider2.webp" onload="changeSlide(1)">
<img loading="lazy" class="slider" src="graphics/slider3.webp" onload="changeSlide(1)">
<img loading="lazy" class="slider" src="graphics/slider4.webp" onload="changeSlide(1)">
<img loading="lazy" class="slider" src="graphics/slider5.webp" onload="changeSlide(1)">
<img loading="lazy" class="slider" src="graphics/slider6.webp" onload="changeSlide(1)">
<button class="slider-button slider-black slider-display-left" onclick="changeSlide(-1)">&#10094;</button>
  <button class="slider-button slider-black slider-display-right" onclick="changeSlide(1)">&#10095;</button>
</div>

JS：

var slideIndex = 0;
 document.querySelector('.slider').forEach(function(img){
      img.addEventListener('load', changeSlide(1);
    });
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("slider");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1}
  x[slideIndex-1].style.display = "block";
  setTimeout(carousel, 5000); // Change image every 5 seconds
}

function changeSlide(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slider");
    if (n > x.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = x.length }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
        x[i].style.width = "100%";
    }
    x[slideIndex - 1].style.display = "block";
}

此代码的用例是当 2G 连接速度非常慢的移动用户开始下载图片时，幻灯片在图片完成加载之前开始切换。因此，实施了 onload 的解决方案，以便仅在图像完全加载时（延迟后）才开始切换。

标签： javascripthtmlcsscarouselonload