Mostrar la barra cargando pagina

21 de abril de 2009 111 comentarios ,
Puedes poner en Blogger la barra "cargando página" que indicará que los elementos del sitio se están cargando. Una vez que el sitio cargue todos los elementos la barra desaparecerá. Para colocarlo en nuestro blog nos ayudaremos con un script, los pasos son los siguientes:

Vamos a Plantilla | Edición de HTML y antes de </head> pegamos lo siguiente:

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

Guardamos los cambios y vamos a Diseño | Elementos de la página y en un elemento HTML/Javascript pegamos lo siguiente:
<div id="imgLOAD" style="text-align:center;">
<b>Cargando...</b>
<img src="URL de la imagen" />
</div>
Este elemento lo podemos arrastrar donde mejor nos guste, aunque generalmente va arriba de los posts. Donde dice URL de la imagen lo cambian por la dirección de la imagen que quieran. Les dejo unas cuantas imágenes para que usen.



cargando
cargando
cargando
cargando
cargando
cargando
cargando
cargando
cargando
cargando
cargando
cargando


111 comentarios en:

" Mostrar la barra cargando pagina "

  1. estaba esperando a que publicaras este post me quedo de maravilla
    gracias

    ResponderEliminar
  2. Hola Daniela, qué bueno que te ha servido. Saludos.

    ResponderEliminar
  3. Hola daniela, quisiera saber la dire de tu web, par ver como te quedó.

    Potro: la verdad que está muy buena la idea, de todos modos, no creo que pueda usarla, ya que mi página con ese flash del Cyborg y el Widget de las fotos demora mucho en cargarse.

    Saludos!

    ResponderEliminar
  4. Bueno, lo ideal es que sólo se usen los scripts necesarios, aunque tu página me carga rápido, no sé si sea por el navegador o la conexión a internet.
    Saludos.

    ResponderEliminar
  5. wow!!! genial me sirvio muxo :-)
    gracias x el truco

    cuidensen muxo y gracias!!

    bye

    ResponderEliminar
  6. Hola ETOILE-SAMA,
    Qué bueno que te gustó. Sólo que para que desaparezca la barra cuando carga la página debes poner el código en un elemento sólo y no compartirlo con el script de las imagenes que rotan.
    Saludos.

    ResponderEliminar
  7. Excelente, recién conozco este blog, y le veo el más útil para los bloggeros...

    Gracias, saludos!

    ResponderEliminar
  8. Hola Alfonso E.
    Gracias por tus comentarios y bienvenido, ojalá puedas encontrar información útil aquí.
    Saludos.

    ResponderEliminar
  9. epale amigo no me sirvio la imagen se queda hay no se desaparece que hagoooo

    ResponderEliminar
  10. Al parecer es por los scrolls de bienvenida que tienes, esos scrolls son muy bonitos pero por desgracia impiden que otros scripts se ejecuten correctamente.

    Saludos.

    ResponderEliminar
  11. epale amigo disculpa ya resolvi el problema de todas formas gracias y visita mi blog

    ResponderEliminar
  12. Me alegro que te haya funcionado ;)
    Saludos.

    ResponderEliminar
  13. Hola Potro cabe destacar que te hace falta una barra de cargar muy famosa
    http://static.ak.fbcdn.net/rsrc.php/zCQYC/hash/ejut8v2y.png

    ResponderEliminar
  14. Ah chinga! No la reconozco :(
    ¿De dónde es esa barra?

    ResponderEliminar
  15. mmm, es de Facebook, pense que lo conocias.
    bueno si quieres colocalo para que los demas lo pongan
    nos vemos

    ResponderEliminar
  16. Ah vaya, es que casi no uso Facebook :P

    ResponderEliminar
  17. Que tal Mi buen Potro!
    Oie Campeon, me gusto mucho este script y opte
    por ponerlo en mi blog, pero sabes que, la mendiga
    imagen no desaparece al terminar de cargar el blog.

    Nose si fuera mucha molestia que le hecharas un
    ojo de pasada a mi blog: http://CeTis71.blogspot.com

    Por mientras aqui andara indagando que tienes
    un material ultrarecontrautilisisisisisimoo! ajuaa! :)
    Saludos, y cuidate!

    ResponderEliminar
  18. Hola Charly,

    No veo que tengas el script en tu blog, pero igual a veces sucede que otros scripts hacen que este no funcione adecuadamente :s

    ¡Saludos y gracias por tu comentario!

    ResponderEliminar
  19. oye portro me gustaria ponerla como una imagen estatica o algo asi pero no se como

    ResponderEliminar
  20. Podrías intentarlo así, en el segundo código donde dice:
    style='text-align:center;'

    Cámbialo por:
    style='text-align:center; position:fixed; top:100px; left:500px;'

    Donde dice top 100px es la distancia de arriba y left 500px la distancia desde la izquierda.

    ResponderEliminar
  21. HOLA!
    Instalé tu script y no funciona, espero que me puedas ayudar
    http://alejandropensado.blogspot.com
    Saludos y GRACIAS!

    ResponderEliminar
  22. Puedes probar con esta otra opción que tiene Oloblogger:

    http://oloblogger.blogspot.com/2010/02/aviso-de-carga-solo-con-css.html

    Saludos.

    ResponderEliminar
  23. PUES ME HE DADO CUENTA QUE EN LOS BLOGS QUE NO FUNCIONA (EL MIO POR EJEMPLO) FUNCIONA AL FINAL SI LE QUITO LA PARTE: (b)Cargando...(/b) PUSE PARENTESIS PORQUE NO PUESDO PONER LOS SIGNOS DE MENOR QUE Y MAYOR QUE

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Estimado, el mayor que y menor que se pone como sigue (Los pondré separados pues si los coloco juntos los caracteres aparecerán con el signo)

      Mayor que ---> & g t ; (ponlos juntos)
      Menor que ---> & l t ; (ponlos juntos)

      saludos y espero haberte ayudado

      cbonick

      Eliminar
  24. Ummm qué extraño, pero bueno, mientras funcione de eso modo está más que bien :)

    ResponderEliminar
  25. potro nuevamente molestando jejeje hay forma que esa imagen de carga (mientras se cargue el blog) ponga opaca el fondo algo muy parecido al efecto causado al usar el Shadowbox: ventanas modales multimedia. solo que es solo mientras se carga la pagina.

    ResponderEliminar
  26. Ummm no, o al menos no con este método :\

    ResponderEliminar
  27. Potro lo que yo kiero es que salga una pagina en blanco con solo la imagen de la barra cargando y cuando termine de cargar la pagina desaparezca y aparezca mi contenido

    ResponderEliminar
  28. No sabría decirte, al menos éste script funciona con imágenes, no sé si haya algún otro que acepte formato flash.

    ResponderEliminar
  29. potro revisando la parte 'imgLOAD' style='text-align:center;' sustitui los apostrofes (') por comillas "" y funciono Y POR ALGUNA RAZON ESTRAÑA al copiar tu codigo y pegarlo al gadget pegue imgload sin la parte que va en mayusculas por lo que no me funcionaba hasta que puse la forma correcta que es : imgLOAD seria bueno que los usuarios verifiquen si han colocado bien el nombre imgLOAD.

    ResponderEliminar
  30. Qué curioso lo de las comillas :?
    Gracias por el aporte, cambiaré mejor los apostrofes por comillas por si las dudas.

    ResponderEliminar
  31. potro so en lugar de la barra puese una imagen, ESTA ES LA DUDA: como hacer para que quede flotando, pero centrado? es decir que no importe que resolucion tenga el navegador que siempre se vea centrado, algo parecido a shadowbox, en la forma esque siempre esta centrada

    ResponderEliminar
  32. Esa sí te la voy a deber porque no veo cómo. Quizá habría manera de hacerla flotante y de ajustarle medidas para centrarla pero sí irá en función de la resolución del monitor donde lo configures, en algún otro se verá distinto :/

    ResponderEliminar
  33. Que tal potro, d nuevo x aca.Poco a poco estoy arreglando el blog con los utilisimos aportes q nos brindas.
    Instale el script y funciona . Una pregunta: y si quiero q al entrar al blog solo me aparezca la barra CARGANDO en una pagina sola (al centro) y cuando termina de cargar recien aparezca el contenido del blog?. Se podra?

    ResponderEliminar
  34. No con este método pero investigaré si hay algún otro con el que pueda hacerse.
    Saludos.

    ResponderEliminar
  35. okkk potro ,t felicito , x q a muchas personas no les gusta compartir lo q saben, deberian tomar siempre los buenos ejemplos.

    ResponderEliminar
  36. Hola Potro
    He estado hoy cacharreando en el blog y he notado que el reprodutor de música se detiene luego de una o dos canciones
    Lo que hice fue colocar el pajarito de twitter y algunos enlaces. Me ayudas a saber si hay alguna interferencia entre estos y el cargador de Goear o si es que la página está pesada y la manera entonces como deba "descargarla" a agilizar la carga púes me interesa mantener la información , pero también que se pueda escuchar la música que he colocado
    Gracias lindo

    ResponderEliminar
  37. El problema parece estar en el reproductor, seguramente el resto de las canciones no están funcionando bien, sería cuestión de revisar la lista de reproducción desde Goear.
    De cualquier manera para acelerar la carga del blog basta con eliminar todos los gadgets que no sean necesarios y dejar únicamente los que consideres que sí son verdaderamente útiles, con eso lograrás hacer un poco más rápido el blog.

    Saludos!

    ResponderEliminar
  38. Hola Potro
    Tienes razón, el inconveniente está en Goear, y es que hay algunas canciones que se deja escuchar, se dejan pasar a equipos MP4, pero no se dejan colocar en lsita, pues sale inmediatamente al momento de escucharla Status y queda suspendido y luego sale End of Playlist.
    sabes algún truco para permitir que estas canciones se logren colocar en lista?
    Gracias

    ResponderEliminar
  39. Hola! Queria saber si me puende ayudar con lo siguiente..quiero poner una promo al iniciar la web con el efecto estilo lightbox,, he realizado galerias y demas con esta ventana modal, pero nose como hacer para que se me abra apenas ingreso a la web..espero se entienda y me puedan ayudar!
    Gracias!

    ResponderEliminar
  40. Soraya Eugenia, no hay truco para eso pues eso depende básicamente del reproductor. Pero si el problema está en el formato de las canciones puedes usar algún programa para convertir MP4 en MP3 y luego subes de nuevo tus canciones a Goear.

    ResponderEliminar
  41. Diseños MPR, con Lightbox no es posible agregar una ventana modal al cargar el blog, pero tengo entendido que con Lightwindow sí.
    http://vagabundia.blogspot.com/2007/12/lightwindow-casi-casi-perfecto.html

    ResponderEliminar
  42. Seeee!! esta chidisimo, te la rifas potro, lo implemantare pronto en mi blog!!

    ResponderEliminar
  43. Qué bueno que ha sido de tu agrado :)

    ResponderEliminar
  44. Tengo un problema y es que he insertado lo de que me aprezca cargando, pero cuando se carga la pagina no se quita, explicame detalladamente como tengo que hacer para que desaparezca al cargarse la pagina. Gracias

    ResponderEliminar
  45. Mira en el código que pusiste en el gadget, esta parte debe ser así:
    id="imgLOAD"

    Y lo tienes así:
    id='imgload'

    Debe estar con las comillas dobles y tener lo que está en mayúscula como se indica.

    ResponderEliminar
  46. muchas gracias!!! solucionado!! maquina! =)

    ResponderEliminar
  47. asi se ha quedaodo:
    http://theinformaticalrincon.blogspot.com/

    =)

    ResponderEliminar
  48. Genial lo que hace rato buscaba!! Gracias potro... Si tuvieras algo para calificarte el post te daria un "10" ¿Aunque no te quedaria mal un calificador? piensalo y Gracias! ;)

    ResponderEliminar
  49. muy bueno hay alguna forma de ponerlo que carge solo una parte del blog¿????

    ResponderEliminar
  50. Usa una condicional en el elemento HTML/Javascript donde has puesto el segundo código para ocultarlo donde no quieras que sea visible.

    ResponderEliminar
  51. Hola disculpa use este script pero el problema es que no desaparece cuando se termina la carga y/o se interrumpe, me podrias ayudar a saber que debo cambiar?
    http://www.theradikalzone.blogspot.com
    Gracias

    ResponderEliminar
  52. Algún otro script debe estar haciendo conflicto. Prueba poner le primer código antes de </head> que es donde originalmente debe estar. Si eso no lo resuelve entonces sí debe ser por otro script del blog.

    ResponderEliminar
  53. Genial!!Ya lo puse en mi blog!!Aunque yo lo hice con mi propia imagen relacionada con el tema de mi blog.Muy buen truco.

    ResponderEliminar
  54. Qué gusto que ha sido de tu agrado :)

    ResponderEliminar
  55. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  56. Hace tiempo que sigo tu blog....y es de lo mejor que se puede encontrar sobre blogger...

    Respecto a la barra cargando... tengo un blog y acabo de hacer una animación flash de precarga... queria saber como configurar el blog para que me aprezca la animación de precarga cuando entro al sitio. Pongo este ejemplo sobre lo que deseo ( aunque lo mio seria más simple) http://www.vabieka.com/

    Saludos y Gracias!

    Gonzalo

    ResponderEliminar
  57. Talvez siguiendo este método de Oloblogger:
    http://oloblogger.blogspot.com/2010/02/aviso-de-carga-solo-con-css.html

    Sólo que en lugar de poner el código de la imagen pondrías el código del archivo flash.

    ResponderEliminar
  58. Hola
    Sabes que se me queda pegado el cargando aunque ya haya cargado la pagina.
    Que puede ser????

    ResponderEliminar
  59. La mayoría de las veces es por algún otro script con el que no es compatible, sucede muy a menudo.

    ResponderEliminar
  60. hola potro eres el mejor..! gracias a este post o como se llame mi blog se vé genial.. pero no tienes otro truco para que la imagen sea flotante? porfa responde

    ResponderEliminar
  61. Hola Jim 011,

    Prueba cambiando esta parte del código:
    style="text-align:center;"

    Por esta:
    style="text-align:center; position:fixed; top:200px; left:300px;"

    ResponderEliminar
  62. wow esto es genial si me funcionó. gracias potro eres el mejor

    ResponderEliminar
  63. Gracias! muy util :D

    ResponderEliminar
  64. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  65. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  66. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  67. Potro muy buena tarde, fijate que necesitamos tu ayuda, tiene relación con la carga de nuestro blog, en los ultimos 2 días ha estado muy lenta dicha carga, no sabemos a que pueda deberse, hice una revisión en busca de algo que pudiese causar dicho problema pero aun sigue igual a pesar de que quite algunos scripts que creimos que eran los culpables pero sigue igual, échale un vistazo por favor y nos cuentas por esta vía, sabemos que siempre encuentras una solución a nuestros problemas.

    ResponderEliminar
    Respuestas
    1. Buenas noches. Quizá sea tu conexión a Internet, porque cargué tu blog tres veces y las tres veces cargó a muy buena velocidad o.O

      Eliminar
  68. Ah ok, muchas gracias, creimos que no era eso porque manejamos otro blog y ese si cargaba rapidito, entonces borre todo el historial del navegador, incluso probamos con otro navegador pero la diferencia en cargar continuaba, pero bueno ojala sea eso entonces, gracias como siempre, feliz día!

    ResponderEliminar
  69. Tienes razón, recien ingresamos nuevamente como cualquier otro lector y si cargó rápido, gracias nuevamente!

    ResponderEliminar
  70. estamos en el 2012 jojo
    HOLA
    potro no sabras algo igual pero q solo sea para un gadget en specifico

    ResponderEliminar
    Respuestas
    1. No he entendido José, ni lo del año ni lo del gadget :/

      Eliminar
  71. Hola Potro!!!
    Podrías echarle un vistazo a mi blog para ver como consideras el tiempo de carga del mismo... Personalmente lo veo algo lento, ya me dirás
    Gracias!!!

    ResponderEliminar
    Respuestas
    1. Hola JordanyPippen, a mí me ha cargado en buen tiempo, muy poco en realidad (en comparación con otros sitios), pero aun así no está de más que consideres eliminar cosas que no sean realmente útil, eso siempre debe hacerse aun cuando el blog cargue bien ;)

      Eliminar
  72. Respuestas
    1. En el blog que aparece en tu perfil lo veo funcionando bien.

      Eliminar
  73. ffff nunca se me dio por guardar las imagenes sino copiarlas de tu blog y ahora parece que estan caidas :(

    ResponderEliminar
    Respuestas
    1. Hola Juan David, ya he alojado nuevamente las imágenes, de cualquier manera te recomiendo que la alojes en tu propio hosting.
      Saludos.

      Eliminar
  74. Hola potro alguna sujerencia para poner esto en mi web ... pero quisiera que saliera de primero sin que se muestre nada ... hasta que pase el tiempo que debe pasa que se quite y se ponga la web lo estoy haciendo en xhtml y css

    ResponderEliminar
  75. potro como pusistes ese boton anclado al rool over de tu blog ese que dice te gusta ciudad de blog que contiene un css cuando das click... haa y necesito ayuda con el botoncito cargando para mi web que esta en xhtml y css necesito que salga en toda la pantalla y solo el boton cargando

    ResponderEliminar
    Respuestas
    1. Mira estas entradas Rudy:
      http://ciudadblogger.com/2011/03/precargar-el-blog-con-jquery.html
      http://ciudadblogger.com/2012/01/botones-flotantes-para-recomendar-el.html

      Eliminar
    2. gracias por la ayuda ... soy nuevo por aqui y me ha servido de gran utilidad ciudad de bloger

      Eliminar
    3. Pues bienvenido a Ciudad Blogger :)

      Eliminar
  76. hay algo que no me gusta y es que sale el cuadrito al rededor como se quita eso?

    ResponderEliminar
    Respuestas
    1. Supongo que debe ser por algún estilo de tu plantilla, habría que ver en cuál blog lo has puesto.

      Eliminar
  77. Hola potro gracias por la información, una pregunta si quiero colocar una imagen más grande que ocupe todo el ancho del blog con la misma función?

    ResponderEliminar
    Respuestas
    1. Puedes poner una imagen mucho más grande, pero eso perjudicaría la velocidad de carga del blog :/

      Eliminar
  78. Hola, potro! xD
    Eh... Bueno, pues tengo una duda; ¿Por qué no sale nada?
    Hice todos los pasos e hice exactamente como tú lo escribes aquí, pero no pasa nada, la barra no sale y todo está exactamente igual, como si no hubiera nada.
    ¿Me podrías ayudar? Gracias!
    Recién llego a tu blog y parece que me servirá mucho! Saluditos *u*

    ResponderEliminar
    Respuestas
    1. Hola Keizzu, no mencionas en cuál blog lo pusiste, pero prueba poner el primer código antes de </body>

      Eliminar
  79. Hola, no se si me podrias ayudar.
    Mi blog se carga bien, pero arriba en la barra superior, la ruedecita de descarga no deja de dar vueltas..¿me explico? ¿porque pasa esto?
    Mi blog es http://elrefugiodelirtea.blogspot.com
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Lirtea, entré a tu blog pero no he visto que hayas colocado el código de esta entrada por lo que no he podido verificar lo que mencionas.

      Eliminar
  80. hola hola!! soy una seguidora en la sombra, ajaja bueno te comento hace mucho tiempo que uso ese script y me va de perlas, indudablemente, el problema es que e añadido otro efecto con text/javascript , que hace que las letras cambien de color que qeda bastante bien, y no me gustaría prescindir de ninguno de los dos, he estado mirando y por la red ponia algo de jQuery y de ponerle no.conflict , he modificado el codigo, le he hecho de todo y nada, alguna solución ? te paso mi blog por si quieres ver el problemita

    http://nubilactica.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola azucarilla azucarada, lo del no.conflict es sólo para cuando hay incompatibilidad entre jQuery y otras librerías como Mootools y Scriptaculous. ¿Cuál es el código que añadiste para las letras? ¿si quitas ese código funciona nuevamente este?

      Eliminar
    2. Efecto rainbow, para el titulo de mi blog
      Rainbow Text Effect (c)2003-12 mf2fm web-design http://www.mf2fm.com/rv

      En los creditos del codigo pone esto por si sirve de ayuda...

      Eliminar
    3. Gracias por los detalles extra. He puesto en un blog de pruebas ambos scripts, primero puse después de <head> el de esta entrada, es decir, el de la barra "cargando", y luego antes de </head> puse el del efecto arcoiris y ambos han funcionando, con un poco de retardo pero funcionan sin problema.
      ¿No has puesto algún otro código que podría afectar el de "cargando?

      Eliminar
    4. mmm antes del efecto rainbow funcionaba correctamente, fue al colocarlo, que vi que ya no iba... dejame ver si pongo cada uno en un lugar diferente aver si va..
      los demas efectos si funcionan, tengo alguno mas por ahi y si van.

      Pruebo y te comento Gracias!!

      Eliminar
    5. nada e probado colocando el de cargar desp. de Head y el de rainbow antes de /head y se qeda igual, le e quitado el efecto rainbow para comprobar nuevamente que sea esto, y directamente a funcionado sin problema ninguno.

      Eliminar
    6. Es extraño, quizá quieras probar otra opción que no use script, como este:
      http://www.oloblogger.com/2010/02/aviso-de-carga-solo-con-css.html

      Eliminar
    7. Gracias!! voy a echarle un vistazito =)

      Eliminar
  81. EXACTAMENTE HICE LO QUE DECIA EL POST, Y NO SE PUDO :( LO INTENTE 2 VECES Y NO.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger