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

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

Paso 3: El Javascript

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

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