Contáctame Suscríbete (RSS)

« Tutoriales « BlogArtículosDownloads

Cómo hacer un cargador sencillo para aplicaciones Web

Miércoles, 9 de julio, 2008

, , ,

Acerca de

Soy Sergio Nouvel, diseñador y consultor Web. Escribo sobre Web, cultura y tecnología, así como artículos y tutoriales para desarrolladores Web. Más...

Lo había prometido anteriormente, y aquí va: en pocos pasos, veremos cómo construir un cargador para aplicaciones Web que tapa toda la pantalla mientras la página se carga, y desaparece al completarse la carga, como lo hace Gmail o Yahoo! Mail.

Repito: este cargador está pensado para Aplicaciones Web

El cargador que veremos a continuación yo lo recomiendo para aplicaciones Web y no para páginas Web comunes y corrientes. ¿Por qué? Por un tema de usabilidad y de buena interfaz. Como vimos en este post, los primeros segundos en la carga de una página Web son cruciales, y puesto que la finalidad de las páginas Web es generalmente informativa, hay que priorizar eso: información.

El usuario en una página Web puede comenzar a ver información y utilizar la página a las pocas décimas de segundo de comenzada la carga, y tapar la página durante esos segundos puede ser muy frustrante.

El código JavaScript que usa este cargador espera a que todos los elementos de una página estén cargados. Con esto quiero decir: HTML, CSS, imágenes, scripts externos, flash, etc. Este tipo de comportamiento es más adecuado para aplicaciones Web, que por lo general no son “usables” sino hasta que todos los javascripts e imágenes estén adecuadamente cargados.

Habiendo dicho esto, dejo el uso de este código a su propio criterio.

Parte 1: HTML

El HTML requerido para el cargador no puede ser más sencillo:

<body onload="ocultarcargador();">
<div id="cargador">
     Cargando...
</div>
<!--Aquí empieza el resto de tu contenido... -->
</body>

El atributo onload=”ocultarcargador();” será el que realice la magia. Cuando la página esté completamente cargada, el div “cargador”, que cubre toda la página, desaparecerá.

Parte 2: CSS

#cargador {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   padding:5px;
   background-color:white;
}
.esconder {display:none;}

El selector para #cargador hace que la <div> quede flotando y ocupe todo el espacio de la página. Es necesario especificar un color de fondo para ocultar lo que se está cargando abajo. El selector para .esconder es simplemente la clase con la que ocultaremos el cargador.

Parte 3: JavaScript

Lo ideal es que este código vaya previo a la etiqueta <body> en el HTML:

<script type="text/javascript">
<!--
function ocultarcargador() {
	 c = document.getElementById('cargador');
	 c.className="esconder";
}
-->
</script>

Es todo. El div “cargador” se muestra ocupando toda la pantalla (gracias a CSS), y cuando la página y sus archivos se encuentran ya cargados, el cargador desaparece.

Sugerencias para mejorar aún más el efecto

  • Si estás usando un framework como Script.aculo.us, jQuery, MooTools, YUI o el que sea, puedes hacer desaparecer el cargador mediante una animación. Ten en cuenta, eso sí, que como la superficie usada por la div es demasiado grande, algunos efectos probablemente correrán torpemente.
  • Puedes reemplazar el color de fondo por un PNG semitransparente, de modo que por debajo del cargador sea visible la página cargándose.
  • Puedes incluir un GIF animado tipo “spinner” o similar para adornar la espera. Cuida de que sea liviano (menos de 3 Kb).

¿Probaste este tutorial? ¿Te funcionó? ¿Tienes dudas o aportes? Pronúnciate en los comentarios.

24 comentarios.

1

agosto 4, 2008Fabian Ramirez

Asi separas la capa XHTML de la JS

Saludos

2

agosto 4, 2008Fabian Ramirez

window.onload = function() {
//js
 }

3

agosto 4, 2008Sergio

@Fabian buen punto, saludos!

4

agosto 27, 2008Pablo

Muy bueno el post, tengo una consulta, si quiero que el LOADING se ubique por encima y centrado de mi web como vario el css, ya que probe cambiando la position y no me anda.

5

octubre 12, 2008Bloque21

Hola, como debo poner el codigo, dime el orden de como debo poner el codigo en mi web…Respondeme a: Bloque.21@hotmail.com

6

febrero 15, 2009pol

como coloco un gif que me simule a un cargador, en q parte del codigo va, y si tengo varios links y kiero q apezca este efecto tendria q colocar el codigo en cada pagina.atte

7

febrero 15, 2009Sergio

@Bloque21: En el tutorial está la explicación del lugar y el orden para poner el código.

@Pol: el gif tendría que ir dentro del div con id “cargador”… es decir, donde dice “Cargando”.

Y sí, tienes que poner el código en todas las páginas donde quieras replicarlo.

Saludos!

8

marzo 30, 2009maria jesus

Hola, necesito un cargador sencillo para los scripts que envio con el Outlook Express, como llevan música esto necesita un poco de tiempo de espera y la gente no sabe que está cargando.
Creo que este mismo serviría, pero no sé cómo se comunica el css que he guardado a parte, en mi web, con el código del mensaje del outlook.
Script de ejemplo:
 http://www.bhyma.com/Traducciones/members/lesraphaella/rafaela.html

9

marzo 31, 2009juan c

bueno yo soy nuevo en web nesesito ayuda de alguien que me diga donde tengo q poner esos codigo y donde esta eso de html por que de verdad que no lo encuentro y mi pagina es echa en paginawebgratis.es aver quien me ayuda mi email es warriors_records@hotmail.com me pueden a~adir o enviar mensaje salu2s gracias

10

marzo 31, 2009Sergio

@juan c: Este tutorial requiere, lógicamente, conocimientos básicos de HTML. Esto escapa a lo que puedo hacer yo, así que te dejo un buen link para empezar:

http://www.librosweb.es/xhtml/index.html

:)
 saludos!

11

mayo 3, 2009omar

que hondas…wow…esto es lo que estaba buscando…solo me falta darle algo de animacion al cargardor…buen tutorial…saludos…

12

mayo 3, 2009omar

hola una pregunta… ando probando el codigo…y todo sale bien…mi pagina esta combinada con flash y html…cuando lo pruebo en la red…mi animacion flash sale junto el cargador animado… ay una forma de tapar el .swf..tambien..saludos gracias

13

mayo 9, 2009Nacho

Buenas, tengo la siguiente consulta. Me anda correctamente el código. Pero teno un problema con height. El 100% me toma como el 100% del area visible. Pero no del total de mi página. Es decir que si bajan el scroll se ve las cosas que se van cargando. Como lo puedo solucionar?

Saludos y gracias por el post!

14

mayo 9, 2009Sergio

@Nacho: ahí lo que serviría es que en la div #cargador el CSS sea “position:fixed” en vez de “position:absolute”, pero tiene el problema que IE6 no reconoce dicho atributo.

Se puede solucionar relativamente haciendo que IE6 siga con posicionamiento absoluto, que es mejor que nada:

position:fixed;
 _position:absolute;

El guión bajo hace que sólo IE6 reconozca el atributo y lo priorice por sobre “fixed”.

Otras soluciones pueden usarse por medio de JavaScript, pero ahí nos escapamos de la sencillez que era el motivo original de este tutorial.

Saludos!

15

mayo 9, 2009Nacho

Grosso! Muchas gracias por la ronta y eficaz respuesta.

Saludos!

16

mayo 9, 2009Sergio

@Nacho: gracias!

@Omar: es un tema aquel de los Flash, una opción es ponerlos con display:none y hacer que la función que oculta el cargador muestre además los Flash.

¿te sonó a chino? Voy a buscar un ejemplo concreto que funcione.

Saludos!

17

julio 21, 2009Mat

Exelente! no me fue facil encontrar esto.. jaja

Un simple efecto fade… cuando pide el css para esconder el Div estaria bueno…

Alguna idea para lograrlo? algun tutorial?
Saludos!! =)

18

julio 29, 2009Patricio Diaz Zuñiga

Excelente aporte.
En solo 2 minutos quedo funcionando.

Felicitaciones Sergio Nouvel

19

agosto 31, 2009Un código para el cargador de tu página web « Conviviendo con La Muerte

[…] He encontrado éste código para el cargador de mi página que tan complicado ha sido crear para mí, parece una solución fácil para los que nos construimos la web sin conocimientos de programación. Espero a vosotros también os sea útil sea útil. Via. […]

20

febrero 17, 2010Clockman

Muchas gracias por el tutorial. Me será de gran ayuda para un sitio web que estoy haciendo actualmente.

21

mayo 6, 2010Paula

ACA ESTA LA SOLUCION A TODOS SUS PROBLEMAS _______ JEJE A MI ME SIRVIO DE MUCHO .. ESPERO QUE LES SIRVA LA INFO DE RAGZZA.. SALUDOS

22

junio 17, 2010Alesandrucci

Hola sergio soy uno más de los que se alimentan de tu altruismo, jejeje. bueno pero esta ves no me funcionó, y coloque las cosas donde indicas… en el body el oload, la funcion js antes de cerrar el head y el css en mi css…! lo muestra pero no lo desaparece, pense en limitantes del navegador pero en IE da el mismo efecto…Que será?

23

junio 17, 2010Sergio

@Alesandrucci: probablemente es algo con el JS, porque si te muestra el cargador es que el CSS está ok.

Saludos!

24

agosto 27, 2010Jorge

Que tal Sergio, el codigo me funcionó con la unica salvedad, que ponga el “gif animado” que ponga ,el mismo se presenta como una imagen estatica. Lo hice es una paginas aspx de VS2008.
cualquier sugerencia que me puedas dar te lo agradeceria.( el problema me da con todos los navegadores)