Este me está volviendo loco. Mi código javascript funciona para la mayoría de las diapositivas en una plataforma que creo, pero a veces se estropea. Por lo general toma una de cuatro formas:

1. la diapositiva aparecerá como una imagen pequeña debajo de un logotipo que puse en la diapositiva cuando la diapositiva no es lo suficientemente ancha para llenar el área de visualización, o
2. la diapositiva aparecerá con el tamaño adecuado pero debajo del logotipo que ahora ocupa toda la altura del área de visualización, o
3. ambos de los anteriores, o
4. no aparece ni la diapositiva ni el logo. En su lugar, se sigue mostrando la diapositiva anterior.

Mi código no es tan complicado. La parte que muestra la diapositiva individual es la siguiente:

 var backgroundImage; var imgHeight; var imgWidth; function waitForHeight() { sleep(120).then(() => { if (imgHeight == 0) { waitForHeight() } else { setBackground(); } }); } function getSizes() { imgHeight = this.height; imgWidth = this.width; return true; } function showImage(imgPath) { var myImage = new Image(); myImage.name = imgPath; myImage.onload = getSizes; myImage.src = imgPath; return myImage; } function setBackground() { var backgroundPosition = ""; var backgroundSize = "100%"; var aspectRatio = imgHeight / imgWidth; if (aspectRatio > 0.70) { backgroundSize = "10vw, auto 100%"; backgroundImage = "URL(images/LCI_emblem_2color.png), " + backgroundImage; backgroundPosition = "top 1rem left 1rem, top right"; } var mainPanel = document.getElementById("mainpanel") mainPanel.style.backgroundImage = backgroundImage; mainPanel.style.backgroundPosition = backgroundPosition; mainPanel.style.backgroundSize = backgroundSize; } function addPic(curCell, curSlide, nodeNum) { imgHeight = 0; // flag that height not set yet var curImg = showImage(curSlide.childNodes[nodeNum].firstChild.nodeValue); curImg.setAttribute('class', 'd-none d-md-block'); curCell.appendChild(curImg); backgroundImage = "URL(" + getSlidePicture(curSlide) + ")"; waitForHeight(); }

El código, como dije, no es complicado. Puedo entender un poco cuál es el problema: la imagen no se carga o se coloca en el área de "fondo" incorrecta, pero no entiendo por qué sucede.

He notado que el problema ocurre con las mismas diapositivas tanto en Chromium como en Firefox y ha sobrevivido a varias versiones de cada navegador, por lo que probablemente no sea un problema del navegador.

¿Algunas ideas?