Precarga tu web con Jquery en tres pasos

Cuando utilizamos Jquery en nuestros proyectos, solemos inicializar nuestros códigos con las siguientes expresiones $(document).ready(); o $(document).load();. Ambos métodos crean alguna que otra confusión. Cuando utilizamos ready(), nuestro código empezará a cargarse una vez que el DOM también lo esté. En cambio, cuando utilizamos load(), nuestro código empezara a funcionar cuando todos los elementos del DOM (es decir, imágenes, vídeos, …) estén cargados. Por lo tanto, si lo que queremos es que nuestro código se cargue lo antes posible, es conveniente utilizar el método ready() que, por otra parte, es el que normalmente se suele emplear.

Sin embargo, ¿qué pasa, si a pesar de usar $(document).ready(); nuestra página es tan pesada y tarda tanto en cargarse que propicia que, durante unos segundos, esta se vea incompleta o desordenada? ¿Qué queréis que os diga? Es algo que particularmente odio…

La solución B·B·B (buena, bonita y barata): ¡Crea un preloader!

Pues eso mismo: crear un preloader. ¿Qué es exactamente? Digamos que se trata de una especie de pantalla de transición que, a veces, lleva una ruedita en el centro que indica que algo, por debajo, se está cargando, que desaparece cuando todo esté listo. De esta manera, cuando desaparezca nuestro útil preloader, todo nuestro código estará cómo y dónde debe estar.

¿Y cómo se hace?

Paso 1: El HTML

Justo debajo del body, crearemos un div vacío que será nuestro preloader

<div class="preloader"></div>

Paso 2: El CSS

Le damos los estilos convenientes a nuestra clase .preloader
. Aquí, podéis incluir, como background, un icono de carga, centrado en el centro

.preloader {
	background: url(img/loader.gif) no-repeat center #000;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}

Paso 3: El Javascript

En nuestro código Javascript/Jquery, ocultaremos nuestro div.preloader, mediante el método faceOut().

$(document).ready(function () {
   $('.preloader').fadeOut('fast');
});

¡Y ya está! En tres pasos tendremos un magnífico preloader que tapará todos nuestros trapos sucios… ¿A que mola?


Concha Alviz

Me llamo Concha Alviz y llevo, en esto del Diseño y de la Comunicación, más de una década. Licenciada en Publicidad y Relaciones Públicas, empecé mi carrera profesional como diseñadora gráfica en el campo de la Publicidad y el Marketing para, más adelante, especializarme en diseño web y en desarrollo de front-ends.


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

l
Tradúcelo »