En ocasiones es interesante indicar al usuario de una página web, que esta está en proceso de carga. Recuerdo especialmente el ejemplo del script Lightwindow. Se trataba de un fichero que tardaba un poco en cargarse y cualquier intento de utilizarlo antes de estar completamente en la caché, provocaba que no funcionara.
Cargando datos. Espere por favor.Si queremos advertir de que algo está todavía pendiente de cargar en nuestro espacio, tendremos que colocar un aviso (texto y/o imagen) justo después de la etiqueta
<BODY>, para que sea lo primero que se ejecute. Pero, una vez cargada la página, lo más normal será que deseemos quitar dicho aviso. Para ello, vamos a incorporar también, una función que oculta el mensaje una vez cargada la página. Esa función será llamada desde la propia etiqueta
<BODY>.
El código, por tanto, debería quedar más o menos así:
/* Dentro de la etiqueta BODY insertamos una llamada a la función ESCONDER, pasando como parámetro el nombre del DIV (aviso) */
<body onLoad='javascript:esconder("aviso");'>
<!-- A continuación, creamos el DIV con el aviso -->
<div id='aviso' style='text-align:center;margin:0px auto;position:absolute;left:20px;top:80px;width:220px;background-color:#eeeeee;border-width:1px;border-color:#000000;padding:5px;'><img style='float:left;' src='http://i263.photobucket.com/albums/ii148/elsereno100/ajax-loader.gif'/> <span style='font-family:Verdana;font-size:10px;font-weight:bold;color:#990000;'>Cargando datos. Espere un momento.</span></div>
Podemos modificar la imagen o el texto y el aspecto del bloque cómo queramos, modificando los valores CSS de la etiqueta
STYLE.
Nos queda crear el pequeño SCRIPT para esconder el
DIV, para lo cual insertaremos este código antes del
</head>:
<!-- ESCONDER BLOQUE -->
<script type='text/javascript'>
function esconder(id)
{document.getElementById(id).style.visibility = "hidden"; document.getElementById(id).style.display = "none";}
</script>
Puede que en vez de un aviso, prefirais poner cualquier otra cosa que entretenga a vuestros lectores. Todo lo que querais lo podeis colocar dentro del
DIV llamado aquí "aviso".
Pero usad un poco el sentido común porque con las ADSL actuales, la cosa no se verá durante mucho tiempo y tampoco es cuestión de que pongais cosas como esta...
22 comentarios:
Ésto me ha venido muy bien para un blog que tengo con fotos en que hay un script para visualizar las imágenes, el cual, si no se termina de cargar, no funciona.
Efectivamente, no deja ver la página hasta que está completamente cargada.
Puedes ver el resultado si quieres aquí, y aunque todavía tengo que hacer unos retoques, para la imagen de carga ya he puesto la mía.
Gracias por este truco, hacía tiempo que buscaba algo así.
Entre otros retoques José GDF, no olvides quitar algo de espacio en la primera imagen. No sé por qué, pero mientras carga la cabecera, el espacio que ocupa la imagen de aviso es enorme.
Olomán, ayer me dieron un premio y al pensar a quién se lo envio, me he acordado de todos vosotros que pasais tanto tiempo enseñando lo que sabeis. Yo os estoy muy, pero que muy agradecida pues lo poquito que voy haciendo, os lo debo a vosotros.
Espero lo aceptes y te guste.
Un beso
Que tal, de los avisos que he probado de cargando página, este me parace muy bueno, pues se esconde al terminar, y no deja el espacio en blanco, sólo le encontré un problema, en el que ojalá me puedas ayudar, tanto en Safari de PC, como de Mac, el anuncio no se quita, y la verdad me gustaría tenerlo implementado, así que si sabes como lo puedo solucionar, espero me eches una mano, gracias, nos vemos...
Proteo, en Safari para PC funciona correctamente. De hecho lo acabo de volver a comprobar y es así. Para MAC no puedo probarlo porque no tengo acceso a ninguno.
Más bien pienso que es algo que tienes en tu página que le debe sentar mal a Safari y que no termina de cargar. Por eso no te desaparece el aviso.
muy bueno el truquillo OLOMAN. quisera saber como ubicarlo en el centro de la pantalla. Gracias
@k-rdo, en el DIV con ID='aviso', dentro de la etiqueta STYLE tienes esto:
position:absolute;left:20px;top:80px;
Sustitúyelo por esto otro:
position:absolute;left:50%;top:50%;
Gracias por el truquito este de la caja de carga!
Hice un post en mi blog con referencia a eso, y por supuesto nombraba al creador ;)
Si quieres echarle un vistazo, puedes leerlo AQUÍ.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The end-tag for element type "body" must end with a '>' delimiter.
eso me aparcecio ¬¬ ayuda! please
The-clips, ese aviso sale cuando te falta algún símbolo de apertura o cierre de etiqueta (< >). Comprueba el código porque algo olvidaste teclear.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "body" must be terminated by the matching end-tag "".
Es esto lo que me aparece...
K-rdo, eso es porque falta algún cierre, punto y coma, comillas... Copia entera la línea del BODY que se pone en el post y cambiala por la tuya para evitar errores mecanográficos.
Saludos.
hola oloman puse este truco para mostrar cuando esta cargando mi blog pero no se quita y si le puse los 2 codigos que tengo que poner AYUDA!!!!!
Hola jU@|\|.
Si no se quita es que tienes algún SCRIPT o similar que no carga bien o que demora de más. Echa un vistazo en el navegador cual es ese elemento que se queda "pillado". Si puedes, lo desinstalas y vuelves a probar.
Si lo resuelves habrás matado dos pájaros de un tiro porque habrás optimizado el tiempo de carga de tu web. Comprueba en IE y en FF al menos, porque a veces lo que se atasca en uno, funciona bien en otro.
ok oloman voy a probar lo que me dices porque solo he visto mi blog con firefox
ya lo prove y ya sirvio bien pero no quite ni cambie nada de mi blog jaja pero bueno gracias oloman eres el mejor
Bueno, se me olvidó decir que a veces simplemente la página tarda en cargar porque Blogger quiere y ahí no hay nada que hacer. Se arregla con el tiempo, como el acné.
Offff!!!
Está chulisimo!
De momento lo he puesto en un blog de pruebas...
Y..., me parece que le falta una contrabarra al final de body onload='javascript esconder'(etc.)
Lo digo porque me dio errores hasta que cai en eso, y no vaya a haber mas confusiones.
Como siempre, excelente Oloman!
Muchos saludos!!
Tendrías que decirme dónde crees que falta la contrabarra, ¿Javier?, porque lo he repasado y creo que está bien. En la línea del BODY no puede ser, porque ahí no hay ningún tag que cerrar...
Hola Olo: todo mal por aca. El truco me funciona bien pero tengo un elemento embed en la pagina principal (diapositiva picasa)que aparece por delante del div que se supone tiene que ocultarlo mientras se carga. Intenté solucionar el problema poniendo el embed en un div con un z-index menor que el 'aviso' pero nada, no hay caso. Ademas, cuando entras a una pagina item, los comments también se ven por encima del div en cuestion. Enfin, seguiré intentando..
Los flash dan bastante la lata con ese tipo de cosas. Una posibilidad que creo recordar que una vez me funcionó. Prueba a modificar el flash con un atributo de transparencia:
- en el object: param name="wmode" value="transparent"
- en el emded: wmode="transparent"
Si no funciona ya no sabría darte otra idea.
Ahh, bueno, perdon por no contestarte, creo que asi: <bodyonload (...) /> , pero vamos que a lo mejor es algo de mi plantilla, da igual :)
De verdad muchas gracias por la entrada, le he dado algunos retoques de CSS y queda muy chulin!
Y que alegría que hayais blogueros como tu y Gem@ :) en Murcia :D :D, de verdad.
Por cierto, ya vi las fotos en la entrega de los Premios 20 Blogs, muuuchas felicidades :)
Saludos!!!!!
PUBLICAR UN COMENTARIO