Manejo de Errores y Lazy Loading en Imágenes de Aplicaciones Web
Resumen
¿Cómo manejar imágenes predeterminadas y errores de carga en JavaScript?
En el desarrollo de aplicaciones web, es común encontrar problemas relacionados con la carga de imágenes. Estos pueden surgir cuando una imagen no está disponible o no se carga correctamente desde la API. Para mejorar la experiencia del usuario, es fundamental implementar estrategias de manejo de errores e imágenes predeterminadas.
¿Cómo detectar errores en la carga de imágenes?
Para manejar estos errores eficientemente, se puede utilizar un evento de JavaScript que detecta cuando una imagen no se carga correctamente. La estrategia consiste en agregar un addEventListener al evento de error en el elemento de imagen de nuestra aplicación. Esto nos permite ejecutar una acción específica cuando una imagen falla al cargar.
movieImage.addEventListener('error',()=>{console.log('Error: la imagen no cargó correctamente');});
¿Cómo mostrar una imagen predeterminada?
Cuando se detecta un error de carga, es recomendable mostrar una imagen predeterminada en lugar de dejar un espacio vacío. Esto se logra sustituyendo el atributo src de la imagen fallida con la URL de una imagen alternativa, generando una experiencia más coherente para el usuario.
El lazy loading es una técnica esencial para mejorar el rendimiento de nuestras aplicaciones web, ya que permite cargar imágenes solo cuando van a ser visibles para el usuario. Sin embargo, puede presentar problemas si las imágenes no tienen un tamaño mínimo definido. Es recomendable establecer un minHeight en las imágenes para asegurar que se calculen correctamente durante el proceso de carga diferida.
.movie-image{min-height:175px;}
¿Cómo ejecutar el código y verificar los resultados?
Una vez implementadas estas soluciones, es esencial realizar pruebas para verificar que las imágenes predeterminadas aparecen correctamente cuando ocurre un error y que el lazy loading funciona adecuadamente. Podemos usar la consola del navegador para revisar los mensajes de error y confirmar que nuestras estrategias de manejo se están ejecutando como se espera.
¿Qué errores comunes observar y cómo solucionarlos?
En ocasiones, el lazy loading puede fallar porque el tamaño de las imágenes es cero, lo cual impide que el navegador calcule si deben cargarse o no. Al establecer un minHeight, permitimos que el navegador cree un espacio para la imagen, asegurando que el mecanismo de lazy loading funcione de manera efectiva.
Recomendaciones finales
Implementa y prueba el addEventListener para manejar errores de carga.
Utiliza imágenes predeterminadas libres de derechos o crea las tuyas propias.
Establece un minHeight para las imágenes con lazy loading.
Prueba en diversos escenarios para garantizar que las imágenes se carguen correctamente bajo distintas condiciones.
Con estos pasos, mejorarás significativamente la forma en la que tu aplicación maneja la carga de imágenes, ofreciendo una experiencia más fluida y visualmente atractiva para los usuarios. ¡Continúa optimizando otras áreas de tu proyecto para llevarlo al siguiente nivel!
Yo creé una imagen de fondo para cada género de película con el color identificatorio, y le agregué un span con el título en el centro para que se puedan identificar.
En todos los casos no es así.. hay varias películas que tienen la url rota, pero si poseen descripción.
No soy muy bueno con la creatividad, pero esto fue lo que hice! jajaja
Yo en vez utilizar un "addEventListener" con el evento "Error", utilice una condicional if(movie.poster_path === null){...} nose si fue la solucion mas optima, pero me funciono!
Las imágenes de tiipo place holder también ayudan mucho:
.
Cambios en el commiit: Click aquí
.
.
Referencia:
Para los que aun no se les aplique el LazyLoading en la pagina de Categorías. Revisen si agregando min-height en la categoría .genericList-container .movie-img se soluciona .
@amethgabriel acuerdate de pasarle el true a getMoviesByCategory(id)
Yo no vi necesario cargar una imagen, solo cree una nueva clase en CSS para mostrar cuando no cargue la imagen:
Queda así:
Primero que todo agrego en un dataset de la imagen, llamado data-img, el valor del path de la imagen, que si no existe, viene "null". Entonces en el observador agrego esta validación:
Básicamente lo que hago es agregarle una clase nueva si la imagen no existe.
La clase CSS es esta:
En el pseudoelemento ::before de la clase indicamos los estilos a mostrar cuando la imagen no cargue, además aprovechamos que el nombre de la pelicula está en el atributo "alt" y se muestra solo, sin hacer nada más.
Le agregué una imagen y un span con el título de la película.
Yo lo solucioné detectando cuando era 'null' la direccion de la imagen al momento de cargar la película:
.
.
.
.
.
.
El problema es que no logro hacer que tome el color de la categoría y que el texto se quede dentro de las cards.
.
.
.
Le puse esta imagen para que se viera mas divertido que el icono feo del navegador.
Espero haber usado correctamente mi inglés, si no lo usé bien pido perdón
.
Este es el código que usé, ahora iré a ver como lo hizo el profe :)
movieImg.addEventListener('error',()=>{ movieContainer.classList.add('error-img-msg'); movieContainer.textContent='';const errorImg =document.createElement('img'); errorImg.classList.add('error-img'); errorImg.src='./assets/undraw_location_search_re_ttoj.svg'const errorText =document.createElement('p') errorText.innerText=`We searched all the galaxies, but we couldn't find the image from this movie.
This is the name of the movie: ${movie.original_title}.` movieContainer.append(errorImg, errorText);})
Esta es mi solución, agregar una imagen de 1x1 px en base64 y luego agregar el nombre de la pelicula en un span:
Hola buenas tardes compañeros esta es mi solución :D
movies.map(movie=>{//Creo una variable donde guardo toda la ruta donde le asigno el poster path de cada movielet posterImage =`https://image.tmdb.org/t/p/w300/${movie.poster_path}`;console.log("Pelicula creada!");const $movieContainer = d.createElement('div'); $movieContainer.classList.add('movie-container');const $img = d.createElement('img'); $img.classList.add('movie-img');//Aqui sucede la magia//Indagando un poco en la pagina de placeholder se me ocurrio//ya que al no encontrarse con una image me devuelve null //con el metodo include verifico si existe "null" y si existe le agrego una placeholderImage sino le agrego el poster path $img.dataset.image=(!posterImage.includes('null'))? posterImage :`https://via.placeholder.com/150/FFFF00/000000?text=${movie.title}`; $img.dataset.id= movie.id; $img.alt=`${movie.title}`; $movieContainer.appendChild($img); $fragment.appendChild($movieContainer);//Aquí está!addImage($img);});
Problema resuelto.
Simplemente le agregue un condicional cuando esté creando la película, si es que el hash de la pelicula es null entonces crea una img
A mi me pasaba ese error de CSS en un proyecto react con los intersection observer, cargaba todo y no sabia porque, lo encontre debbugeando y mi solución fue colocar un skeleton y que se observara ese elemento para hacer la carga de mas datos.
Haciendo asi que el skeleton se fuera recorriendo con cada carga nueva de datos haciendo que el observe diera: false.
