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>
<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>
<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...
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
É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.
ResponderEliminarEfectivamente, 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.
ResponderEliminarOlomá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.
ResponderEliminarEspero 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...
ResponderEliminarProteo, 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.
ResponderEliminarMá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
ResponderEliminar@k-rdo, en el DIV con ID='aviso', dentro de la etiqueta STYLE tienes esto:
ResponderEliminarposition: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!
ResponderEliminarHice 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.
ResponderEliminarMensaje 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.
ResponderEliminarNo se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
ResponderEliminarMensaje 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.
ResponderEliminarSaludos.
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!!!!!
ResponderEliminarHola jU@|\|.
ResponderEliminarSi 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
ResponderEliminarya lo prove y ya sirvio bien pero no quite ni cambie nada de mi blog jaja pero bueno gracias oloman eres el mejor
ResponderEliminarBueno, 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é.
ResponderEliminarOffff!!!
ResponderEliminarEstá 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...
ResponderEliminarHola 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..
ResponderEliminarLos 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:
ResponderEliminar- 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 :)
ResponderEliminarDe 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!!!!!
Una Consulta, yo quiero que este objeto me aparezca en donde coloco las entradas (un poco mas arriba) Ej. un poco mas arriba de tus Anuncios Google pero dentro de lo que vendria a ser el "cuaderno" entiendes?
ResponderEliminarBueno resulta que al colocarlo alli al objeto modificando la posicion en Left y Top logro colocarlo donde deseo pero no me aparece... (poniendo de ejemplo tu blog una vez mas.. Me aparece detras de lo que es el cuaderno entiendes?)
Osea me aparece atras de donde van las entradas no sobre el "papel"
Si me puedes decir como solucionarlo te lo agradezco!!
Muchas Gracias
Tendría que analizar tu plantilla, pero para ver si se resuelve por la vía rápida, añádele un z-indez:500; a la etiquet STYLE del DIV:
ResponderEliminar<div id='aviso' style='...
Hola, Oloman:
ResponderEliminarComo sabes estoy acabando mi nueva plantilla. Uno de los detalles que me faltaban era el aviso de carga.
Pues bien, no sé por qué, he usado exactamente el mismo código que en mi plantilla actual (una Mínima Black modificada), en definitiva, lo mismo que en esta entrada tuya, de donde lo tomé en su día, pero cambiando los textos (sin ellos, en realidad) y cambiando, evidentemente, la dirección de la imagen, y el condenado truco no funciona.
Seguramente hay algún conflicto con algún otro script. Aunque realmente no sé qué pasa, pero te puedo asegurar que no he cambiado ni una coma siquiera...
Pues bien, he solucionado el problema sólo con CSS, prescindiendo del JavaScript:
1- He cargado la imagen de aviso después de <body>, como tú. Hasta aquí no hay diferencias. Eso sí, he quitado la llamada dentro del body, porque ya no hay script al que llamar.
2- Casi al final de la plantilla, justo antes de </body> he puesto esta mini hoja de estilos:
<!-- Esconder aviso de carga -->
<style type="text/css">
#aviso {
visibility:hidden;
display:none;
}
</style>
Que es en definitiva lo que hace tu script, añadir a la ID "aviso" los atributos de invisibilidad cuando termina de cargar la página. En resumidas cuentas, el resultado es el mismo, porque como está al final de la página y carga lo último, es entonces cuando se esconde la imagen de carga.
Podría haber buscado el script con el que hace conflicto y haber solucionado el problema de otra manera, pero me hubiera vuelto loco buscando, porque, en estos momentos, hay menos scripts en mi nueva plantilla que en la actual, porque quiero aligerarla al máximo, así que he optado por solucionar esto por la via rápida: CSS en el lugar oportuno.
Ya tienes una alternativa más. Igual a alguien más le sirve :)
Es cojonuda José. Siempre me gusta lo fácil y esto creo que lo es mucho más, porque casi siempre hay varias formas de ocnseguir el mismo resultado. Muy ingenioso. Gracias.
ResponderEliminarHola Oloblogger, ¿me das permiso para poner este artículo en mi blog? Tutoriales Hector (www.tutoshector.blogspot.com)
ResponderEliminarNo problemo, Héctor.
ResponderEliminarOloman, te apso el link donde sale el artículo, haber que te parece...
ResponderEliminarhttp://tutoshector.blogspot.com/2010/02/aviso-para-la-carga-de-una-pagina.html
Saludos
¿Pues que me va a parecer, Hector? Bien... muy bien :D
ResponderEliminarhola oloman disculpa te moleste me ha salido este aviso en la edicion html y la vdd no se como chequear donde es que falta las ".. podrias darme una mano?
ResponderEliminarNo 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 "".
Error 500
El sistema te está avisando de que falta el cierre del BODY (</body>), pero lo más seguro es que el error esté en el código incorporado y que falte ahí algún carácter. Como la estructura general de etiquetas no está bien formada, te avisa de ello.
EliminarPerdón, ahora releeo y observo que tu pregunta exactamente era otra. No puedo ver el código si no lo tienes puesto en tu blog y evidentemente, el problema es que no puedes hacerlo.
EliminarPrimero tienes que comprobar tú mismo si todo está en orden y si no descubres el error, ve probando a incorporar el código poco a poco por bloques completos de etiquetas con sus correspondientes cierres. Cuando veas cual falla lo habrás descubierto. Si no lo logras, pega en un comentario el código que estás intentando insertar mediante una herramienta que previamente te lo transforme de HTML a TEXTO PLANO.
no esconde la imagen
ResponderEliminarNecesitaría más pistas para saber qué te pasa: la página dónde lo tienes, si hiciste exactamente esto o alguna variante, qué usaste como marcador de carga...
Eliminar