Quiero mostrar una nueva imagen en una etiqueta <img> existente. Para lograr esto, estoy actualizando el atributo src a través de Javascript. Sin embargo, después de cambiar el src , la pantalla no cambia para mostrar la carga de la nueva imagen. En su lugar, espera hasta que la nueva imagen se descarga por completo y luego la cambia.
En realidad, estoy configurando la background-image de la etiqueta <img> en la URL de la miniatura de la imagen que se está cargando. El objetivo es tener una imagen de baja calidad que se reemplace gradualmente con la versión de buena calidad. Sin embargo, dado que la nueva imagen no aparece durante la carga, todo lo que obtengo es la foto anterior sentada allí hasta que aparece la nueva de repente.
A continuación se muestra un ejemplo simplificado. Para ver realmente el efecto, abra DevTools > Network y ajuste la aceleración a algo lento. Haga clic en la imagen, luego espere hasta que cambie repentinamente. Esto está sucediendo en Firefox y Chrome, así que supongo que es por diseño.
¿Alguna idea de cómo evitar este comportamiento?
const images = [ "https://picsum.photos/id/1/200/300", "https://picsum.photos/id/2/200/300", "https://picsum.photos/id/3/200/300", "https://picsum.photos/id/4/200/300", "https://picsum.photos/id/5/200/300" ]; let index = 0; const length = images.length; const img = document.querySelector("img"); document.addEventListener("click", e => { index++; img.src = images[index % length]; }); <img src = "https://picsum.photos/id/1/200/300" />Para hacer que la imagen actual desaparezca mientras se carga la nueva imagen, debe eliminar su atributo src .
Sin embargo, para que su <img> tenga un tamaño, debe configurarlo explícitamente (aquí lo he hecho a través de CSS).
const images = [ "https://picsum.photos/id/1/200/300", "https://picsum.photos/id/2/200/300", "https://picsum.photos/id/3/200/300", "https://picsum.photos/id/4/200/300", "https://picsum.photos/id/5/200/300" ]; let index = 0; const length = images.length; const img = document.querySelector("img"); document.addEventListener("click", e => { index++; img.removeAttribute("src"); img.src = images[index % length]; }); img { background: red; width: 200px; height: 300px } <img src = "https://picsum.photos/id/1/200/300" />Alternativamente, puede hacer esto:
const images = [ "https://picsum.photos/id/1/200/300", "https://picsum.photos/id/2/200/300", "https://picsum.photos/id/3/200/300", "https://picsum.photos/id/4/200/300", "https://picsum.photos/id/5/200/300" ]; let index = 0; const length = images.length; const img = document.querySelector("img"); const div = document.querySelector("div"); document.addEventListener("click", e => { img.removeAttribute("src"); index++; img.src = images[index % length]; }); body { margin: 0; } body { margin: 0; } img { position: relative; z-index: 10; } .div { position: absolute; top: 0; z-index: 5; } <img src="https://picsum.photos/id/1/200/300" /> <div class="div">Loading...</div>