Pre-Cargar Imágenes Con JavaScript - Gif Preloader - Muy Sencillo!

En algún momento nos toca desarrollar un sitio donde las imágenes tienen que ser de gran impacto visual y por ende contar con una muy buena definición. Es probable que cuando tenemos este tipo de imágenes nuestro sitio no solo tarde en cargar, sino que también notamos que las imágenes se van cargando de “a pedazos” y esto hace que la experiencia del usuario no sea del todo buena.

Gracias a unas simples líneas de código CSS y JavaScript podríamos resolverlo de la siguiente manera:

• Mientras el sitio cargue los recursos (imágenes) vamos a mostrar un .gif. de precarga (preloader).

• Mediante JavaScript indicaremos qué imágenes se tienen que pre-cargar.

• Cuando nuestro sitio haya finalizado de cargar los recursos quitaremos el .gif (preloader) y mostraremos el sitio.**

Ahora vamos al código!

HTML

  <div id="wrap-preload">
    <img src="preload-gif.gif" alt="gif" class="gif">
  </div>

  <header>
    <h1>foto principal</h1>
  </header>

  <section class="wrap-images">
    <div class="inner-wrap">
      <img src="img/foto-secundaria-1.jpg" alt="paisaje" class="foto">
      <img src="img/foto-secundaria-2.jpg" alt="paisaje" class="foto">
      <img src="img/foto-secundaria-3.jpg" alt="paisaje" class="foto">
    </div>
  </section>

CSS

*{
  padding: 0;
  margin: 0;
}

body, html{
  width: 100%;
  font-family: monospace;
}

header{
  width: 100%;
  height: 100vh;
  background: url('../img/foto-principal.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-transform: uppercase;
  color: #fff;
  font-size: 45px;
}


section.wrap-images{
  width: 100%;
  padding: 150px 0;
}

.inner-wrap{
  max-width: 1140px;
  margin: auto;
  padding: 0 15px;
}

img.foto{
  max-width: 100%;
  height: auto;
  margin-bottom: 25px;
}

#wrap-preload{
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;
}

#wrap-preload.close{
  opacity: 0;
  visibility: hidden;
}

#wrap-preload > img.gif{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

JAVASCRIPT

//Escuchamos el evento load del window y disparamos la funcion que le pasamos como callback (precargaImagenes).
window.addEventListener('load', precargaImagenes);

function precargaImagenes(){

  var img1 = new Image();
  img1.src = 'img/foto-secundaria-1.jpg';

  var img2 = new Image();
  img2.src = 'img/foto-secundaria-2.jpg';

  var img3 = new Image();
  img3.src = 'img/foto-secundaria-3.jpg';


  //Cuando se terminan de cargar las imágenes se le agrega la clase "close" a #wrap-preload.
  var preload = document.getElementById('wrap-preload');

  preload.classList.add('close');

  console.log('Sitio cargado!');

}

VER DEMO

Esta es una manera muy sencilla de pre-cargar recursos con JavaScript, obviamente hay muchas formas de hacerlo pero ésta me pareció la más sencilla para aquellos que están empezando.

Espero que les sirva y lo puedan implementar en sus proyectos!

Saludos!

Leandro Videla

www.leandrovidela.com
Codepen
Instagram