Crear un Efecto Cargando Imagen con Vue JS 2

Vue JS

Demo Github

Si estas trabajando con Vue JS sabes lo simple y rápido que es crear componentes, funciones, métodos, etc. para crear ciertos eventos en una vista Frontend, existen muchas formas de cargar contenidos en la vista como una imagen, en este artículo queremos compartir contigo una manera de cargar una imagen con un Tiempo determinado de espera, vayamos con el artículo.

Si eres Nuevo con Vue JS te recomendamos leer estos artículos para que empieces con este genial Framework y te Familiarices con este Tutorial, los artículos son:

Vista

Bien vamos a empezar creando la vista HTML, agrega un capa (div) con el id root y usaremos el evento @load para llamar al método cargarImagen en donde procesamos la carga dinámica de la imagen

Dentro de la capa vamos a colocar el contenedor de la imagen y luego el texto que dice Cargando. Dentro de la etiqueta img agregamos la directiva v-show con la cual manejamos la condición de carga de la imagen y una clase llamada cargando que la usaremos para aplicarle propiedades CSS al efecto Cargando

Vue JS

Bien ahora vamos crear el código Vue JS, comenzamos creando nuestra variable efecto y dentro de ella colocaremos los atributos, métodos y propiedades de nuestra aplicación

Primero seleccionamos el div con id root que creamos en la vista, luego creamos la ubicación de la imagen que deseamos cargar y la propiedad isLoad la declaramos como false

Ahora creamos la función crearImagen que llamará al método cargarImagen

Por último crearemos dos métodos importantes, uno para cargar la imagen cargarImagen y otro para esperar el tiempo de carga esperarTiempo, le damos un tiempo de 3 segundos, de paso te mostramos todo el código completo

CSS

Como paso final creamos las propiedades CSS, la simulación de el efecto que daremos se basa en cargar una imagen animada en formato transparente Gif, usaremos una imagen cargando.gif que la guardamos en una carpeta llamada img asimismo aplicamos otras propiedades CSS para mejorar la presentación de la animación

A la imagen img que carga al final le damos un margen superior e inferior y que se adapte a cualquier pantalla o dispositivo, para esto usaremos clases nativas de Bootstrap 4 img-fluid, mt-5 y mb-5

Con esto ya esta listo nuestro efecto, para ver el resultado por favor ingresa a la Demo que esta al inicio de este tutorial y también si deseas descargar los archivos de nuestro repositorio Github.

Nota

Algunos métodos y directivas que usamos en este artículo pueden cambiar en futuras  versiones de Vue JS, eso no depende de nosotros si no de los ingenieros que dan soporte a Vue JS.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required