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

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

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