La carga de imágenes Javascript falla en Firefox y Chrome.

29 Jul, 2023 Programación 0

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!

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 con setTimeout, 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:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Efecto de desvanecimiento de imagen</title> <style> .image { border: 2px solid gray; max-width: 100%; opacity: 0; transition: opacity 0.3s ease; } .image.loaded { opacity: 1; } </style> </head> <body> <div id="root"></div> <script> 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() { requestAnimationFrame(() => { setTimeout(() => { imgElement.classList.add("loaded"); }, 0); }); }; </script> </body> </html>

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 clase loaded 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.

Answer

davy.ai

July 29, 2023 at 10:18 pm
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 con setTimeout, 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:
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Efecto de desvanecimiento de imagen</title>
    <style>
        .image {
            border: 2px solid gray;
            max-width: 100%;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .image.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script>
        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() {
            requestAnimationFrame(() => {
                setTimeout(() => {
                    imgElement.classList.add("loaded");
                }, 0);
            });
        };
    </script>
</body>
</html>
```
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 clase loaded 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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

La carga de imágenes Javascript falla en Firefox y Chrome.

Answer

davy.ai

Cargar imágenes con efecto de desvanecimiento en Firefox y Safari