Crear un Efecto Cargando Imagen con Vue JS 2

Nube Colectiva

hace 6 años

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


<div id="root" @load="cargarImagen"> 

  <!-- Acá los Elementos -->
					  
</div>

</div>

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


<div id="root" @load="cargarImagen"> 
					  
  <efecto>
    <img v-show="isLoad" :src="imagen" @load="esperarTiempo" class="img-fluid">
  </efecto>

  <div v-show="!isLoad" class="cargando">Cargando</div>
					  
</div>

</efecto>

<div v-show="!isLoad" class="cargando">Cargando</div>

</div>

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


var efecto = new Vue({

  // Acá colocamos nuestro código
  			
})

var efecto = new Vue({

// Acá colocamos nuestro código

})

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


 var efecto = new Vue({
     el: '#root',
     data: {
         imagen: [
             'https://blog.nubecolectiva.com/wp-content/uploads/2018/10/img_destacada_blog_devs-13-950x305.png'
         ],
         isLoad: false
     },
     ...
 })

var efecto = new Vue({

el: '#root',

data: {

imagen: [

'https://blog.nubecolectiva.com/wp-content/uploads/2018/10/img_destacada_blog_devs-13-950x305.png'

isLoad: false

...

})

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


 var efecto = new Vue({
     el: '#root',
     data: {
         imagen: [
             'https://blog.nubecolectiva.com/wp-content/uploads/2018/10/img_destacada_blog_devs-9-950x305.png'
         ],
         isLoad: false
     },
     crearImagen() {
         this.cargarImagen()
     },
     ...
 })

var efecto = new Vue({

el: '#root',

data: {

imagen: [

'https://blog.nubecolectiva.com/wp-content/uploads/2018/10/img_destacada_blog_devs-9-950x305.png'

isLoad: false

crearImagen() {

this.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


 var efecto = new Vue({
     el: '#root',
     data: {
         imagen: [
             'https://blog.nubecolectiva.com/wp-content/uploads/2018/10/img_destacada_blog_devs-9-950x305.png'
         ],
         isLoad: false
     },
     crearImagen() {
         this.cargarImagen()
     },
     methods: {
         cargarImagen() {
             this.isLoad = false
             this.$nextTick(() => {
                 this.imagen = this.imagen[this.imagen];
             })
         },
         esperarTiempo() {
             setTimeout(function() {
                 this.isLoad = true
             }.bind(this), 3000);
         }
     }
 })

var efecto = new Vue({

el: '#root',

data: {

imagen: [

'https://blog.nubecolectiva.com/wp-content/uploads/2018/10/img_destacada_blog_devs-9-950x305.png'

isLoad: false

crearImagen() {

this.cargarImagen()

methods: {

cargarImagen() {

this.isLoad = false

this.$nextTick(() => {

this.imagen = this.imagen[this.imagen];

})

esperarTiempo() {

setTimeout(function() {

this.isLoad = true

}.bind(this), 3000);

}

})

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


.cargando {
  background-image: url('../img/cargando.gif');
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 30px;
  height: 100px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.cargando {

background-image: url('../img/cargando.gif');

background-repeat: no-repeat;

background-position-x: center;

background-position-y: 30px;

height: 100px;

margin-top: 30px;

margin-bottom: 30px;

}

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


<img v-show="isLoad" :src="imagen" @load="esperarTiempo" class="img-fluid mt-5 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.