Para continuar con mi pregunta anterior, me gustaría que mi presentación de diapositivas cambie las diapositivas solo cuando la imagen se haya cargado. Intenté lo siguiente, pero no parece funcionar según lo previsto, porque simplemente omite las diapositivas al principio:

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

El caso de uso de este código es cuando un usuario móvil con una conexión 2G muy lenta comienza a descargar imágenes, las diapositivas comienzan a cambiar antes de que la imagen haya terminado de cargarse. Por lo tanto, se implementó la solución con onload para que el cambio comience solo (después de un retraso) cuando la imagen está completamente cargada.