如何检测所有onload事件是否已经全部触发完毕？

这个问题是「如何判断window的load事件是否已经触发」问题的更具体扩展超集。

我需要实现一个懒加载的纯CSS图片轮播组件，通过绑定onload事件实现功能：对应幻灯片的onload事件会携带幻灯片编号触发，且仅在对应图片加载完成后才会延迟执行逻辑。但现有方案仅在第一个onload事件触发后就返回complete状态，无法满足需求，因此想询问如何检测所有onload事件是否已经全部触发完毕？

当前所有幻灯片轮播一遍后，轮播组件就会出现异常行为，我需要检测所有onload事件触发完毕的状态，才能在该节点后控制幻灯片行为，修复问题。

https://stackblitz.com/edit/js-fsymew

https://github.com/munchkindev/js-fsymew

首次尝试代码 #

HTML代码 #

<div style="margin-bottom: 30px;">
<img class="slider" src="graphics/slider1.webp" onload="delayedCarousel(1);">
<div class="slider-text" id="slidert1">Text here, you can just ignore this.</div>
<img loading="lazy" class="slider" src="graphics/slider2.webp" onload="delayedCarousel(2);" style="display:none">
<img loading="lazy" class="slider" src="graphics/slider3.webp" onload="delayedCarousel(3);" style="display:none">
<img loading="lazy" class="slider" src="graphics/slider4.webp" onload="delayedCarousel(4);" style="display:none">
<img loading="lazy" class="slider" src="graphics/slider5.webp" onload="delayedCarousel(5);" style="display:none">
<img loading="lazy" class="slider" src="graphics/slider6.webp" onload="delayedCarousel(1);" style="display:none">
<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代码 #

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

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";
}

HTML代码 #

<div style="margin-bottom: 30px;">
<img class="slider" src="graphics/slider1.webp" onload="delayedCarousel(1);">
<div class="slider-text" id="slidert1">Ignore this text, it's irrelevant.</div>
<img loading="lazy" class="slider" src="graphics/slider2.webp" onload="delayedCarousel(2);" style="display:none">
<img loading="lazy" class="slider" src="graphics/slider3.webp" onload="delayedCarousel(3);" style="display:none">
<img loading="lazy" class="slider" src="graphics/slider4.webp" onload="delayedCarousel(4);" style="display:none">
<img loading="lazy" class="slider" src="graphics/slider5.webp" onload="delayedCarousel(5);" style="display:none">
<img loading="lazy" class="slider" src="graphics/slider6.webp" onload="loopedCarousel(1);" style="display:none">
<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代码 #

//   function startSliderLoop() {
//            var i = 1;
//        setInterval(function() {
//            location.href = "/#slide-"+i;
//   //document.addEventListener('click', function (event) {

//  // If the clicked element does not have and is not contained by an element with the .click-me class, ignore it
//  //if (!event.target.closest('#slideButton'+ i )) return;

//  // Otherwise, do something...
//    if (i <= 5)
//    i++;
//    else
//    i = 1;
//}, 3000)
//    }
//    document.addEventListener("DOMContentLoaded", (event) => {
//    startSliderLoop();
//});
var slideIndex = 0;
var sliders = document.querySelector('.slider');
//document.querySelector('.slider').forEach(function(img){
//      img.addEventListener('load', carousel());
//    });

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

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

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