Preloading de Imágenes con Angular

En momentos al realizar una aplicación web utilizamos algunas o muchas imágenes ya sea guardadas en nuestro propio sitio o en sitios externos, el resultado de estas peticiones será que nuestras imágenes se irán cargando poco a poco ,a la velocidad que se vayan descargando los datos de dicha imagen.

Esto dará un aspecto no muy estético a nuestra aplicación hasta que se cargue en su totalidad , para evitar ese efecto podríamos utilizar el evento onload de el tag <img></img> de tal manera podríamos mostrar un loading en lugar de la imagen hasta que nuestra imagen cargue en su totalidad para finalmente mostrarla.

Para lograr esto realizaremos un component en Angular que nos ayudara a controlar el cargado de la imagen. Este componente lo iremos mejorando mediante vamos avanzando.

Primero crearemos un archivo loading.image.component.ts con el cual controlaremos el cargado de la imagen.

Ahora seguimos con la templeta de nuestro componente

Además de ellos agregaremos un poco estilos loading.image.component.css

Y utilizaremos el componente enviandole el url de la imagen.

Obtendremos nuestro resultado:

Como vemos el componente en forma básica ya esta terminado pero podríamos mejorarlos bastante.

Imagen de Cargando Dinámica.

Podemos ver en la templeta del componente que tenemos la animación dentro de la templeta por lo cual solo podríamos usar esta animación para todas las imágenes , pero si en algún momento desearíamos usar otra animación o hasta otro tipo de elemento que se muestre en el proceso de carga con el componente que tenemos hasta este momento no podríamos hacerlo, por ello veremos la manera de poder cambiar la animación de carga por cualquier otro elemento que deseemos.

Para lograr este objetivo utilizáremos la <ng-content></ng-content> en la templeta de nuestro componente.

Y cuando llamamos a este componente pondremos la animación que quisiéramos usar.

Ahora que ya tenemos un componente que admite cualquier componente como máscara de cargado.

Agregando Animación

Como ya terminamos la funcionalidad podemos darle un poco de animación para que no tenga que ser tan repentina la visualización de la imagen.

Para eso cambiaremos un poco nuestra templeta y el código del componente :

Y también cambio la templeta :

Con estos cambios los resultados serán mucho mas estéticos.

Bueno al final logramos hacer un componente que nos ayudara a mejorar un poco el aspecto visual de nuestras aplicaciones.

Acá les dejo el link del proyecto