En mi sitio web, estoy mostrando contenido del lado del cliente. El contenido contiene una cantidad desconocida de etiquetas de imagen. Necesito obtener la altura final de divs después de que se hayan renderizado todas las imágenes. Inicialmente, mi código se veía así:

 onst c = document.querySelector("#content"); c.innerHTML = "<img src='https://images.theconversation.com/files/292585/original/file-20190916-19040-t0k3yp.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip' />"; console.log("Height: " + c.offsetHeight);

Ahora noté que esto está mal, ya que la altura solo cambiará después de que se haya cargado la etiqueta img. He recreado el problema en este violín. https://jsfiddle.net/n0gxvq8L/

 const main = () => { const c = document.querySelector("#content"); c.innerHTML = "<img src='https://images.theconversation.com/files/292585/original/file-20190916-19040-t0k3yp.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip' />"; console.log("Height: " + c.offsetHeight); setTimeout(()=> { console.log("Height: " + c.offsetHeight); }, 1000); } main();

Lo que me da la salida.

 "Height: 18" "Height: 614"

Ahora, pensé en usar el evento de carga de imagen para este propósito. Esto debería activarse después de que se haya cargado la imagen y, por lo tanto, podría obtener la altura correcta del div.

Sin embargo, el problema es que en mi código real tengo un número desconocido de imágenes que se están cargando y necesitaría la altura después de que todas las n imágenes hayan terminado de cargarse.

La única solución que podría pensar es de alguna manera (quizás con una expresión regular) contar la cantidad de imágenes en el contenido cargado dinámicamente, para cada una de las imágenes configurar una devolución de llamada, y luego verificar periódicamente si se han realizado suficientes llamadas de devolución después de lo cual puedo suponga que todas las imágenes están cargadas.

Estoy preguntando si alguien podría pensar en una solución más elegante.