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("imgLOAD").style.display="none";
}
</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. :-)
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:<div align='left' id='imgLOAD' style='position:absolute;top:30px;left:30px'>Cargando...
<img src='http://img165.imageshack.us/img165/1922/loadinganimationliferaysd8.gif'/></div>
<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.
0 comentarios:
Publicar un comentario