viernes, 22 de mayo de 2009

CARGANDO EL BLOG (LOADING)

Este recurso consiste en poner un gif de forma que al cargar ya sea la página principal como cualquier otra, dependiendo de donde coloquemos el gif se muestre una imagen de carga, lo cierto es que cuanto mas ligero sea la carga del blog mejor, claro que esto se consigue optimizando mucho la web o blog. La carga de imágenes relentiza bastante ya que al cargar una página se deben de cargar todas las imágenes, recursos como slides que se crean en páginas externas suelen ser los que mas relentizan la carga ya que se debe de establecer la conexión con la web del cual proceden. Cuidando todos estos aspectos y muchos otros no podemos evitar que tarde algo en cargar la página ya que depende tanto del blog o web como de la conexión a Internet, explorador...
Os voy a enseñar a crear la típica imagen de cargando..., esta se mostrará mientras se carga el blog, una vez cargado la imagen desaparecerá, es un recurso que da un punto mas de calidad y muy simple de crear. Vamos allá!

Primer paso:(Ubicar el Script)


Para ello nos vamos a: Diseño->Edición de HTML aquí buscaremos </head> y pegaremos justamente encima el siguiente código:

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>
Ya tenemos el script, guardamos los cambios y listo.

Segundo paso:(Añadir nuestra imagen de carga)

Lo normal será ubicar la imagen en algún lugar de la sidebar, así cualquier página que se carge permitirá ver el efecto, pero también se puede agregar tan solo a una entrada en concreto que será lo menos común. Debo añadir que la imagen de carga normalmente será como mostraré a continuación pero podéis añadir cualquier otro gif que queráis aun que quizás no tenga demasiado sentido.

Para el caso de la sidebar añadiremos un gadget de tipo HTML/JavaScript o bien podemos insertarlo en algún elemento que tengamos ya creado con tal de no saturar la sidebar.
Aquí insertaremos el siguiente código:

<div id='imgLOAD' style="TEXT-ALIGN: center">
<b>Cargando...</b>
<IMG src="URL DE LA IMAGEN">
</div>
Tercer paso:(Personalizar la imagen)

Aquí os facilitaré unas cuantas imágenes para los que no quieran complicarse mucho la vida buscando en otros sitios, hay cientos de estas imagenes de todos los tipos y colores en la red.

Image and video hosting by TinyPic

Image and video hosting by TinyPic

Image and video hosting by TinyPic

Image and video hosting by TinyPic

Image and video hosting by TinyPic
Image and video hosting by TinyPic

Tan solo tendréis que sustituir donde puse URL DE LA IMAGEN en el segundo paso por la dirección donde se encuentra la imagen. Si queréis una de las que mostré anteriormente podéis conseguir la dirección directamente haciendo click con el botón derecho del ratón encima de la imagen y click en copiar ruta del enlace, lo pegamos y listo, si queréis otras imágenes podréis encontrarlas por ejemplo aquí, donde permite personalizar los gifs de carga, descargáis la imagen y la alojáis en algún servidor de imagenes, como por ejemplo este, obtenéis la dirección y la cambiáis por URL DE LA IMAGEN. Guardaremos los cambios y probar a recargar la página F5 por ejemplo.

8 Comentarios:

zon@2010 dijo...

Muy bueno muchas gracias !!! recomiendo este blog el esto llevo 1 hora aqui!!
zona2010

Merlina dijo...

No sabes lo que hice... Entré en http://es.tinypic.com/
Luego puse la siguiente URL: http://www.ajaxload.info/cache/E8/5B/15/E7/E3/AF/5-1.gif (de una imagen que hice en una página, http://www.ajaxload.info), que había puesto "ver imagen", después entre acá: http://es.tinypic.com/?t=postupload. Puse la URL de la imagen y puse "cargar ahora" y copié la dirección HTML para sitios Web y la pegué donde hiba la URL de mi imagen (en html javascript). Me quedó entre .........gif" y lo último que era ..div., porque borré lo anterior a este para que pudiera ponerse la imagen en mi blog. También sirvió. ¡Un saludo!. Visita mi blog y luego dime que te pareció lo que hice.

caxitos dijo...

Merlina Te quedó bien!! Me alegro que te sirviera y siguieras los pasos perfectamente. Lo único que modificaria sería cambiar el tamaño de los videos que tienes puestos en la parte derecha del blog, ya que para una sidebar creo que son muy grandes.

Antonio F. Lara dijo...

Hola he colocado la imagen pero sigue todo el tiempo no desaparece al cargar

Anónimo dijo...

507 66301127 DJ DONNY ENVIEN SU MENSAJE DE TEXTO AL 2526 DESDE TU CELULAR SALUDOS Y COMPLACENCIAS PARA TODAS LAS MUJERES DEL MUNDO

Publicar un comentario en la entrada

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.