64

Cargando página...

Lo vi hace algún tiempo en el blog de Gem@ y me pareció una forma ideal de pedirle paciencia a nuestras visitas cuando nuestro blog, por el motivo que sea, se demoré un tiempo en cargar.
Se trata de una imagen en movimiento que indica que la página se está cargando y una vez que el blog ha cargado por completo, la imagen desaparece. Podéis ver un ejemplo a la derecha de mi blog, casi arriba del todo de la página.

Para empezar necesitaremos tener una imagen "de carga", que podemos obtener fácilmente en alguna página de Internet.

En NapyFab, por ejemplo, las hay muy bonitas.

En Load Info podemos personalizar su color y escoger tamaño.

En Ajax Load generamos la imagen que más nos guste a partir de varios modelos base.

En Mentalized hay algunas muy originales.

En San Baldo son pocas pero muy lindas.

Una vez decidida la imagen que vamos a usar, la subimos a una página de alojamiento de imágenes, podría ser ImageShack, por ejemplo, y copiamos la dirección (url) que nos proporciona el alojamiento. En el caso de ImageShack, la url a copiar sería la última que aparece una vez subida la imagen.

Nos situamos en la parte de Editar - HTML de nuestra plantilla y justo antes de </head> añadimos este código:

<!-- imagen de carga -->
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById(&quot;imgLOAD&quot;).style.display=&quot;none&quot;;
}
</script>
<!-- fin imagen de carga-->

He añadido <!-- imagen de carga --> y <!-- fin imagen de carga--> para que si en algún momento necesitáramos localizar el código nos resulte más fácil, los navegadores no lo interpretan, así que no va a darnos ningún error.
¡Guardamos cambios!

Ahora hemos de añadir un nuevo elemento HTML-Javascrip y pegar dentro este código donde incluiremos la url de nuestra imagen, después lo arrastramos a donde mejor nos parezca:
<div id="imgLOAD" style="text-align:center;">Cargando...
<img src="URL_DE_LA_IMAGEN"/></div>

He añadido "Cargando..." para que se lea delante de la imagen, cuando la carga termine y la imagen se oculte, el texto también se ocultará. Si solo queremos mostrar la imagen, borramos el "Cargando..." y listo. De la misma manera, podemos cambiar ese texto por cualquier otra cosa..."Espere por favor", "Paciencia, estoy en carga", "Me estoy poniendo las pilas", en fin, lo que sea. :-)

Imagen de carga en la esquina superior de la página


Podemos también colocar la imagen de carga fuera del cuerpo del blog, es decir en una de las esquinas superiores de la página, para ello seguimos los mismos pasos anteriores, con la diferencia de que el código para mostrar la imagen será distinto y tendremos que colocarlo antes del <head> de la plantilla y no en un elemento:

Mostrando la imagen de carga en la esquina superior izquierda

<div align='left' id='imgLOAD' style='position:absolute;top:30px;left:30px'>Cargando...
<img src='http://img165.imageshack.us/img165/1922/loadinganimationliferaysd8.gif'/></div>

Mostrando la imagen de carga en la esquina superior derecha

<div align='right' id='imgLOAD' style='position:absolute;top:30px;right:30px'>Cargando...
<img src='http://img165.imageshack.us/img165/1922/loadinganimationliferaysd8.gif'/></div>

Nota
He incluido en el código la url de mi imagen de carga, por si queréis usarla.
En "top" podemos cambiar la distancia de la imagen a la parte superior de la página, yo he puesto 30px para que los que tengan visible la Navbar de Blogger no tengan el problema de que la imagen se vea sobre ella.
En "left" y en "right" cambiaremos la distancia de la imagen al borde de la página, según hayamos escogido derecha o izquierda para mostrar la imagen.

Entradas Relacionadas:

64 comentarios:


.::AnDyy::.

hola jeje otravez yo..

ahora solo kise opinar para ser el primero jejeje....

e insitir en eso de la radios plizzz ^_^

adios

Fini Calviño

Muchas gracias, como siempre. Yo he puesto en mi blog :-D

The Blog Live

muy buen eso.!!

Smanobeto

Hola Rosa encontre estas paginas, no se si las has visitado pero como buena ayudante para blogger ahi va:
http://nestavista.com/2007/09/como-crear-una-plantilla-para-blogger-y.html

http://nestavista.com/2007/10/5-plantillas-tres-columnas-para.html

Saludos!!

Anónimo

Hola Rosa, queria preguntarte algo:
Los iconos chiquitos que tienes al final de todos los post..Cuando publicas algo, la cosa va a todos esos sitios ?..Y si es asi podrias publicarlos para copiarlos ?. Y otra cosita, he intentado colocar el tenma ese de ver todos loc oemntarios que tiene publicado tu otra colega genio llamada Genma, pero hay algun error, no me deja situarlo en plantilla. Gracias por todo. Besitos

Anónimo

Silvestrosvky, muchas gracias por el aporte! En cuanto pueda le hecho un vistazo...

Anónimo

Bukowski, esos botones son para que tus visitas envien si así lo desean cada entrada a su marcador social favorito, o a varios, para hacer eso tu visita tiene que estar registrada en la web del marcador en cuestión.
Para ponerlos no hace falta que tu estés registrado.
Las webs de los marcadores, son como periódicos online, donde van apareciendo las noticias que los usuarios deciden más relevantes.
Puedes ver como colocarlos aquí:
http://elescaparatederosa.blogspot.com/2007/05/marcadores-sociales-en-blogger.html

Y quizá te interese esta otra forma:
http://elescaparatederosa.blogspot.com/2007/02/marcadores-sociales-en-un-solo-botn.html

En cuanto a lo que dices de "ver todos los comments" no se exactamente a que "truco" te refieres...

gus

Las cosas como son Rosa, yo aprendí mucho con tu blog y esto me ayudó a crecer. La verdad sea dicha! un saludo.

Asran Reginleif.~

Muchas Gracias...
Lo tendre funcionando un tiempo para ver si me acostumbro o no...
peor muchas gracias por el dato...

( Nati )

Muchas gracias!!
Me re funciono!!!

Saludos reina!!

Anónimo

Nati, hija me alegro por ti que estés tan contenta con las cosillas del Escaparate, pero oye, un consejo...no pongas "de todo" y sobre todo no abuses de los script que pueden sobrecargar el blog, se selectiva y escoge lo que más te interese...

TodoGospel by Rachel

Hola:
Que bueno este blog te felicito y gracias esto me sirvió y queda muy bien en uno de mis blogs... Yaquee desde Argentina!!

.: Alexia Stark :.

Me ha venido de perlas, muchimas gracias Rosa!

Talin

Hola Rosa, de nuevo por aquí abusando de tu ayuda.
Quisiera cambiar el color de la palabra "Cargando". Sabes que debería de hacer?

Anónimo

Talín, así:

<span style='color: #fff;'>Cargando...</span>

Talin

MUCAHS GRACIAS Rosa!!! Esta vez me salió a la primera,... OK era facilito.

Ivana Diaz Otero

Ya he puesto la imagen de carga y hasta la he modificado un poco, pero tengo una duda: ¿es posible que pare de cargar cuando la página se haya cargado del toso?. Supongo que para eso se necesita algo más, pero ni idea de qué... :-(

Anónimo

Nefert,no se necesita nada...tal cual esta explicado se oculta una vez carga el blog...revisa el código.

hernaaan

Hola Rosa! Te comento rápido porque no tengo mucho tiempo ;) Escribo porque como vos me ayudaste, quería devolver parte del favor.

Te cuento que para mí queda mejor fijar la animación a una de las esquinas del navegador, y no del blog. En mi caso, como saqué la barra de Blogger (lo único que servía era el Buscar y lo puse como widget) lo puse bien arriba, pero vos sabrás cómo ajustarlo.

Te dejo el código, y mi blog para que veas cómo queda (espero que salga bien, porque los comentarios no aceptan pre, code ni blockquote):

<div id="imgLOAD" style="position:fixed;top:0;right:0"><img src="http://img262.imageshack.us/img262/5629/ajaxloaderuj9.gif"/></div>

Vista previa ;)

Rubén Sada

He implementado este truco de "cargando" y me funciona a la perfección, nuevamente ¡GRACIAS ROSA! por tener un sitio tan útil como éste, que he decidido enlazar como "recomendado" desde la portada de mi blog de poesías. Pondré un pequeño banner con el vínculo hacia aquí, porque de todos los sitios de ayuda para bloggers, éste es el que se explica más claramente los métodos.
¡Saluditos!

Natxo Rovira

Hola Rosa!

Quería hacerte una consulta. Me fue muy útil este truco para mi blog. Sin embargo, por más que intento quitar links, la página tarda mucho en cargarse, incluso siempre desaparece el logo de "cargando página" y el blog se 'cuelga' durante más de un minuto, y tampoco deja trabajar con otra sesión de Firefox. Algunos visitantes se me han "quejado" de que el blog tarda en exceso en cargarse. ¿Tu sabes porqué puede ser y que podría hacer para que no pasara?

Gracias!!
natxo

Anónimo

Natxo, cada cosa que colocamos en el blog "pesa", cuanto más añadimos más "engordamos" el blog.
Sobre todo pesan las imágenes grandes ,las presentaciones de fotos tipo slide y los widgets.

No se trata de incluir en nuestro blog todo lo que nos gusta o llama la atención...tendremos que ser un poco selectivos en esto y pensar que merece la pena y que no. Algo como un reloj o un widget que dice el tiempo, por ejemplo, es una completa inutilidad que "carga" el blog con un peso inútil.
Cuando incluimos una presentación de fotos, normalmente usamos el servicio de una página externa, cada vez que accedemos al blog, este ha de "conectarse" con esa web, si la web en cuestión anda mal (por el problema que sea), está conexión se volverá superlenta e incluso llegará a "bloquear" el blo, que puede llegar a quedarse cargando eternamente e incluso colapsarse.

Otro problema son los headers (cabeceras) excesivamente pesadas (como es tu caso)...
En fin, el problema en estos casos en general es el uso excesivo de cosas, a menudo superfluas.

Los leds (letreros luminosos) yo los prohibiría directamente (está es una opinión personal) según mi experiencia en varios casos, no hacen más que impedir la carga óptima del blog...

Como ves, no hay una causa concreta, pero es altamente recomendable el buscar la mayor sencillez posible en cuanto a diseño, los tamaños pequeños o medianos en cuanto a imágenes y, a menudo, el prescindir de cosas llamativas en beneficio del contenido y de nuestras visitas.

Un saludo!

Anónimo

rosa
agradezco mucho tus aportes
apenas comienzo a utilizarlos, ya mejoraré

en este caso logré poner el cartel de cargando, pero en internet explorer no me funciona bien, se tranca
quizá tenga muy pesado el blog, no sé.

aqui lo dejo
saludos y gracias nuevamente

levearquitectura.blogspot.com

Anónimo

leve, el IExplorer es así...ya sabes que interpreta los códigos como le da la gana...en Firefox tu blog va perfecto, en IE tarda algo más en cargar y por eso la imagen parece que se "atasca" pero no es así, una vez cargado el blog, la imagen se cierra.
También depende de la velocidad de conexión, en mi caso, si he notado la diferencia entre los dos navegadores, pero tampoco es mucho...con mi conexión, claro.

Unknown

Tu blog se esta convirtiendo en una adicción! De a poco voy aprendiendo!
Mil gracias!
Lucero*

Anónimo

Botella, gracias y cuidadin con las adicciones que son muyyy malass! :-)

David Trejo

ROSA HOY INSTALE LA IMAGEN DE CARGA PERO SOLO TARBAJA EN UN ELEMENTO, EN LOS OTROS SIGUE TRABAJANDO

Anónimo

David, no entiendo lo que quieres decir...solo en un elemento, en los otros sigue trabajando...no entiendo nada.
La imagen desaparece una vez el blog se ha cargado por completo, esté colocada en el elemento que esté...unas veces se ocultará primero y otras no, dependerá del tiempo de carga del blog...

Viaje al sol

Aca estoy yo por otros lados... como siempre con problemas... Es que una vez que la pagina se tmin de cargar, el gif sigue estando ahi... no deberia desaprecer?

Besos

Anónimo

J.W, suponiendo que lo hayas aplicado correctamente, así es, una vez carga la página el gif deja de verse...

El caso es que he estado en tu blog y a pesar de que parece que ha cargado, en la barra de abajo del navegador se sigue viendo:
"Transfiriendo datos desde i.ytimg.com" lo que quiere decir que no ha cargado por completo...he esperado unos minutos y no ha cambiado a: "terminado" no se que es i.ytimg.com pero supongo que una we, por el .com, así que algo que se carga o se usa desde allí no termina de cargar...

Viaje al sol

Ya lo solucioné (eso creo) el problema habia surgido al agregarle todo el texto que le agregue, de alguna manera se habia borrado el "id=imgLOAD" y por eso no se ocultaba y lo tomaba como un elemento mas de la pagina.

Gracias.

Manolo Gamboa

hola Rosa, he puesto todo bien, y me sale cargando permanentemente. Incluso cuando abajo en la barra de estado me dice "Listo", porque puede ser?

Anónimo

Manu, si colocas la imagen en la parte superior de la página y colocas su código en un elemento en algunas plantillas no funciona correctamente...como digo en la entrada, cuando va a emplearse en esa parte el código se coloca antes del <head>

Anónimo

Hola Rosa:
Grcias por tu widget es muy bueno; eres una artista;te queria comentar una duda, veras la imagen se carga correctamente, pero se ve junto con el resto de la página mientras carga. Es decir, a mi me gustaría que sólo se viese el cargador mientras carga la página y que cuando la página estuviese totalmente cargada cargada ent desapareciera, y no las dos cosas al mismo tiempo como hace ahora. No se si me he explicado bien, si quieres ver lo que te digo puedes entrar en mi blog. Muchas gracias... un saludo.

Anónimo

humberto, no tengo idea de como hacer eso en Blogger , de hecho no creo que sea posible, ya que el blog no es como una página web, no tiene páginas estáticas, por lo tanto no hay página principal.

Anónimo

Muchas gracias por tu respuesta Rosa, ahora ya me quedo más tranquilo. Todos mis aplausos para tu magnífico blog y para tu gran sabiduría, pero sobretodo por la generosidad con la que la transmites.

Conejo

Muchas gracias por todos los trucos que publicas en tu blog :D hasta el momento solo me he animado a usar esta, pero seguire intentando para lograr comprender mejor esto de el uso de HTML y cosas asi @___@

Anónimo

Conejo ¡Gracias a ti!:-)

Anónimo

hola...necesito una ayuda para mi blog..
yo necesito que mis entradas antiguas solo aparescan en el archivo..como se hace???
desde ya muchas gracias
mi mail es notkcs-07@hotmail.com

Anónimo

Matias, no puedes ocultar entradas en Blogger...

Lady Ruth =)

Gracias Rosa ya lo aplique y quedo muy bien. Saludos :P

@ZULMAROQUE

Gracias por mandarme a este post. me salio otra vez! ... jeejejeee de veras que me esta gustando tu pagina, gracias por ayudarnos a todos...
Un problemita que tengo es porque al cargar la pagina de los demas carga en la parte superior y de alli no se mueve ... pero la mia comienza en la parte superior y luego termina de cargarla/ se situa en la parte de la mitad del blog .... asi no puedo ver mi gif de cargar.... hay alguna manera de solucionar eso?? Gracias

Anónimo

Kasafia, yo más bien creo que el motivo es ese video o lo que sea que pone Kasafia TV, es lo que "llama" a la página cuando se abre el blog...

@ZULMAROQUE

Muchos THANKS Rosa! a ver intentare sacandolo ... gracias!!!

ketekites

Buenas! cuando pongo este codigo funciona bien, pero me deja de funcionar el otro que tengo para que se me habran los enlaces externos en una nueva ventana, me parece que era este:

script language='javascript' >
var dominio = "www.kitesurftgn.com";
var dominio1 = "kitesurftgn.com";
var script = "javascript:void(0)";
var imagenesblogger0 = "bp0.blogger.com";
var imagenesblogger1 = "bp1.blogger.com";
y sigue...
que puedo hacer? alguna idea?
Gracias x tu ayuda, x esta y x las anteriores ;) y un saludete

www.kitesurftgn.com

Anónimo

ketekites , suelen pasar esas cosas con algunos scripts...no se "llevan" bien. Tendrás que prescindir de uno de los dos, lo siento:(

ketekites

ok, me imagino.... gracias de todas formas ;)

José María

Hola Rosa. ¿Qué tal va todo? He insertado un "cargador" en mi espacio y es curioso. Sobre todo porque puedes personalizarlo con cualquier texto. Es una especie de página cargando y bienvenida. Un abrazo campeona.

Anónimo

Neru ¡Muy chulo queda! :D

Anónimo

Gracias rosita! Me salió a la primera( No como los emoticones :S) Jeje...

-¦-= Shadow†Sneak =-¦-

Hola.jeje.. pregunta: hay alguna forma de carga un "SWF" en vez de una "gif" ? como tu entrada de "Colocar un banner o imagen flash en el blog" ,porque la calidad cuando exporto de flash a gif animado es horrible y e bajado programas externos , como el "Magic Swf2Gif" , funciona perfecto pero lo único malo que no tiene para transparencias y los demás que e bajado con transparencia todos me piden registro para poder exportar, bueno esa era mi consulta..

saludos.

Anónimo

-¦-= Shadow†Sneak =-¦- Pues no tengo ni idea...
Quizás funcione sustituyendo <img src="URL_DE_LA_IMAGEN"/> por elcódigo del flash... :o

-¦-= Shadow†Sneak =-¦-

Nones ya había probado de esa forma, por eso te pregunte.XD, entonces ni idea?..

saludos.

-¦-= Shadow†Sneak =-¦-

Jeje.. buscando y buscando la pude hacer cargar usando un "SWF" pero solo con la 1era alternativa, la segunda me da error de plantilla esa me hubiese gustado mas, pero espero encontrar algo para dejarla fuera, por mientras me quedare con esta..jeje..

saludos.

c

Hola Rosa, hice este truco de cargando... y en el blog peliculasanta cruz, quedo muy bien, pero en http://laiglesiasantacruz.blogspot.com
casi no se ve, aun que lo ponga a la derecha aparece siempre a la izquierda. Puedo cambiar el tamaño de la letra?? María c

c

Rosa, algo mas en peliculasantacruz.blogspot.com el cargando esta bien, pero noto que justo después de haberlo puesto, se me fue el favicon. Que puede haber pasado? María C

Anónimo

c En iglesia...tienes puesto "left" eso es izquierda...
En el código metes el texto de "Cargando..." así:
<span style="font-size:12px;
">Cargando...</span>

En cuanto al favicon, tiene que ser casualidad, no influye para nada...revisa si la imagen sigue estando disponible en la url

c

Muchas gracias Rosa, como siempre solucionando problemas!!!!! Gracias, mARIA C

Anónimo

Hola rosa...como siempre entro a ver tus novedades, pero hoy tengo un problema pequeñito y no se si podrías ayudarme,tengo junto a una amiga unos blogs, y resulta que con firefox no hay problema, pero ahora me entero de que con esplorer sólo carga a la mitad y no la parte derecha , y es justamente alli q tenemos nuestros jueguitos y no quisiera quitarlos.
Me darías una mano??... mil gracias desde ya!

esta es la url
juntasytbrevueltas.blogspot.com/

Anónimo

Eli & Pao Si es este el blog de que hablas: http://juntasytbrevueltas2.blogspot.com/

Yo lo veo perfecto en IE, claro que uso la última versión del navegador... como deberían hacer todos creo...

Anónimo

Hola!,,no,, jeje, ese es nuestro blog de juegos, el q te hablo es este:
http://juntasytbrevueltas.blogspot.com/, esa es la pag q no me carga, gracias por responder y disculpa la demora..

Anónimo

Eli & Pao Concretamente no puedo decirte nada... deberías ir probando a retirar los gadget de la sidebar uno a uno e ir mirando, quizá en el código de alguno este el problema.

Anónimo

Ok rosa, gracias otra vez!!
Intentaré ver q pasa..chau!

Anónimo

ya está solucionado!... nose q sería , pero opte por la solucion más sana... reinstale la plantilla !!.. jeje
chau!

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S