Efecto Cargando Página con jQuery

imagen para esperar
Algunas páginas son muy lentas y necesitan que le agreguemos el tradicional efecto de cargando en texto o el gif animado mostrado a la izquierda.

Para los que conocemos html nos resulta conocido los DIV con el texto «cargando», así que vamos a ver como con unas cuantas líneas podemos llevar a cabo este efecto.

Este ejemplo es útil para una página que tarda demasiado en cargar, y usaremos un link a un archivo externo jQuery, un JS y un DIV.

Los siguientes pasos es entre las etiquetas HEAD:

PASO 1: Agregar el archivo jQuery externo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

PASO 2: agregar debajo el script siguiente:
<script>
$(window).load(function () {
$('#cargando').hide();
});
</script>
PASO 3: agregar los estilos:
<style type="text/css">
#cargando {
width:350px;
height:70px;
clear:both;
background-color:#FFFF00;
color:#CC0000;
}
</style>
En este caso de los estilos puedes agregar una imagen (gif) como las que usualmente se usan o puedes usar un texto resaltado como en el ejemplo.

Luego dentro del BODY y según corresponda agregar un DIV antes del código html que demora en visualizarse:
<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
Con esto ya podemos probar nuestra página web y quedará como el siguiente DEMO.

Comentarios

Publicar un comentario

Entradas populares de este blog

Superponer una imagen sobre otra con CSS

Script para buscar palabras o textos en una página (html) con Jquery

¿Ganas dinero en Facebook con Página, Grupo, Comunidad, etc?