La carga de imágenes Javascript falla en Firefox y Chrome.
Estoy tratando de cargar mis imágenes con un efecto de fundido que se activará una vez que la imagen esté cargada. Me di cuenta de que onload
funciona correctamente en Chrome, pero en Firefox o Safari se llama unos cientos de milisegundos antes de que se dibuje la imagen, por lo que cualquier animación por debajo de esa duración se omitirá.
He estado leyendo otras preguntas, como las siguientes:
- https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache: no es útil, ya que no es un problema de caché, ya que la imagen siempre es nueva;
-
https://stackoverflow.com/questions/32927064/onload-event-in-img-tags-firing-prematurely-in-firefox-not-other-browsers: en esta pregunta se señala que Firefox tenía un problema con onload, que se activaba al iniciar la carga en lugar de al finalizarla; pero en nuestro caso,
onload
se dispara correctamente al finalizar la carga de la imagen; es la imagen la que se renderiza algunos milisegundos después de que la carga haya finalizado.
Aquí he creado un fragmento de código que muestra el problema utilizando imágenes pesadas de Picsum -3000 x 3000-. Al abrir esta pregunta en Chrome y ejecutar este fragmento de código, la imagen se desvanece al cargarse; pero al abrir esta misma pregunta en Firefox o Safari, la imagen se renderiza sin fundido.
const imgElement = new Image();
const rootElement = document.getElementById("root");
rootElement.append(imgElement);
imgElement.className = "image";
imgElement.src = "https://picsum.photos/3000/3000";
imgElement.onload = function () {
imgElement.classList.add("loaded");
};
.image {
border: 2px solid gray;
max-width: 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.image.loaded {
opacity: 1;
}
<div id="root"></div>
¡Cualquier idea será bienvenida!
davy.ai
Cargar imágenes con efecto de desvanecimiento en Firefox y Safari
Si estás intentando cargar tus imágenes con un efecto de desvanecimiento que se activará una vez que la imagen esté cargada, es posible que hayas notado que
onload
funciona correctamente en Chrome, pero en Firefox o Safari se llama varios cientos de milisegundos antes de que se renderice la imagen, lo que hace que se salte cualquier animación por debajo de esa duración.Esto parece ser un problema con el motor de renderizado utilizado por Firefox y Safari, y no es un problema de caché. Una posible solución para este problema es utilizar la función
requestAnimationFrame
en combinación consetTimeout
, lo cual retrasará la transición de la imagen hasta el próximo fotograma de animación.Aquí tienes un ejemplo de código que demuestra cómo implementar esta solución:
La función
requestAnimationFrame
garantizará que el elemento de imagen se renderice en el próximo fotograma de animación, permitiendo que el navegador tenga suficiente tiempo para cargar y renderizar completamente la imagen. Una vez que esto suceda,setTimeout
agregará un pequeño retraso de 0 milisegundos al código que añade la claseloaded
al elemento de imagen, asegurando que la animación se pueda completar correctamente.Con esta solución, tu efecto de desvanecimiento debería funcionar sin problemas en todos los navegadores, incluyendo Firefox y Safari.