SummArg | Cursos y recursos para webmasters

12/02/2011

Colocar un efecto de preload a cualquier elemento de tu website con jQuery

QueryLoader es un plugin para jQuery que nos permite aplicar un tenue efecto de precarga en imágenes, texto y cualquier cosa que coloquemos dentro de un selector, en muy pocas líneas. Incluso sirve para imágenes que se cargan vía CSS.

Primero deben descargar el paquete desde esta ubicación y se los inserta en el documento:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type="text/javascript" src="js/queryLoader.js"></script>

Luego, antes del cierre de la etiqueta </body>, colocamos:

<script type="text/javascript">
	QueryLoader.init();
</script>

Para el caso de querer aplicar el efecto sobre un selector en particular, podemos indicarlo. En este caso aplicamos el efecto sobre el <div id=”logo”>:

<script type="text/javascript">
	QueryLoader.selectorPreload = "#logo";
	QueryLoader.init();
</script>

Si el efecto de precarga no tiene los colores adecuados para el sitio web en donde se utiliza, simplemente basta con modificar las líneas del CSS que insertamos arriba. Por ejemplo, esta combinación sería útil en sitios de fondo blanco:

.QOverlay {
 background-color: #fff;
 z-index: 9999;
}
.QLoader {
 background-color: #fff;
 height: 1px;
}

Descarga | Demo

Dejar un comentario