Efectos mientras cargamos. Protoload
Esto de la web 2.0 dinamica y bonita con tanto movimiento en javascript que esta llevando a la muerte del flash, o por lo menos del flash "pesado", ayuda el impulso de miles y miles de librerias para programar en ajax (es bonita palabra tan usada ultimamente).
He tenido la suerte de utilizar unas cuantas de estas librerias para crear movimiento de div’s de nuestra web, modificar el contenido del DOM de forma dinamica (otra cosa que contar), crear catalogos de imagenes muy resultones y conseguir mostrar el circulito de carga mientras se terminar de carga una web.
Simplemente explicare ahora como consegui este efecto sin tener que despeinarme mucho y os pondre un pequeño ejemplo.
La libreria que use fue Protoload que necesita del framework Prototype que para hacer web 2.0 es casi indispensable.
El uso de esta libreria es tan sencillo que se resume en dos funciones:
- $(’nuestrodiv’).startWaiting(’ruedaCarga’);
- $(’nuestrodiv’).stopWaiting();
La primera parte $(’nuestrodiv’) es el div de nuestra web sobre el que se va aplicar la rueda de carga, el uso de $(’div’) es por la libreria Prototype y aqui puedes ver como se puede usar este $, muy recomendable conocerlo y saber usarlo.
Sobre este div aparecera la rueda de carga hasta que se llame a la funcion stopWaiting(). Sencillo.
Ahora, que si queremos usarlo para la web entera tenemos un pequeño problema, imaginar que tenemos 4 imagenes en nuestra web que son las que mas cuesta cargar y deseamos que hasta que termine la carga de estas imagenes no queremos que desaparezca esta rueda, usease, hasta que la web no este cargada completamente la rueda no se vaya (que soy de pueblo !!!).
A esto lo llaman: Ajax scenario.
Bien, primero lo haremos sobre una sola imagen para ver como funciona.
function cargaRuedaImg(){
var R = new XMLHttpRequest();
R.onreadystatechange = function() {
if (R.readyState == 4) {
$(div).stopWaiting();
}
};
R.open(’GET’, ‘imagenpesada.jpg’, true) ;
$(div).startWaiting(’ruedaCarga’);
R.send(null);
}
Invocamos a esta funcion en el onLoad de nuestro <body> y tenemos la rueda lista para funcionar sobre el div hasta que la rueda se cargue.
Que pasa si la parametrizamos la funcion con function cargaRuedaImg(div, img) ¿? Que tenemos una funcion generica para cada una de las imagenes, poniendo donde queremos que se cargue la rueda, ahora imaginaros que creamos otra funcion que reciba por parametro un arry con div’s e imagenes, o incluso que miremos la libreria Prototype para que obtenga todas las imagenes del DOM.
En fin, esto solo es una base que puede dar buenos resultados, si acabais usandolo muy a menudo tal vez merezca la pena invertir el tiempo necesario para convertirse en algo resulton y facil de insertar en cualquier web.
Un detalle es que cuando descargueis la libreria, vereis que tiene un css con las ruedas por defecto de la libreria, si no quereis incluir otro css mas a vuestro proyecto añadis la linea de la rueda a vuestro css y todo a funcionar.
Os dejo un ejemplillo por si es de utilidad a alguien.
<html>
<head>
<title>Ejemplo Protoload</title>
<script src="lib/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="lib/protoload/protoload.js" type="text/javascript"></script>
<style type="text/css">
.ruedaCarga {
background-image:url(’lib/protoload/ajax-loader.gif’);
background-repeat:no-repeat;
background-position:center center;
background-color:white;
}
</style>
<script>
function cargaRuedaImg(img, div){
var R = new XMLHttpRequest();
R.onreadystatechange = function() {
if (R.readyState == 4) {
$(div).stopWaiting();
}
};
R.open(’GET’, img, true)
$(div).startWaiting(’ruedaCarga’);
R.send(null);
}
</script>
</head>
<body onload="javascript:cargaRuedaImg(’ejemplo.jpg’, ‘contenedor’);">
<div id="contenedor">
<img src="ejemplo.jpg">
</div>
</body>
</hmtl>