Degradar con Prototype. El evento onDomReady
En el post anterior vimos la importancia de cuidar que nuestros scripts AJAX degraden correctamente. Hoy veremos un caso práctico de cómo lograrlo utilizando prototype.
Pongamos como ejemplo el efecto e24Writer descrito en posts anteriores. El e24Writer hace que una serie de elementos aparezcan progresivamente, por tanto necesitaríamos que dichos elementos estén ocultos antes de comenzar el efecto. Supongamos que animaremos el texto “AJAX”, de manera que aparezca letra a letra. Si ocultamos este texto inicialmente poniendo la propiedad de CSS display a none, si por alguna razón de las descritas en el post anterior el javascript fallara entonces nuestra web no degradaría correctamente porque el texto “AJAX” nunca se mostraría.
Si por el contrario dejamos el texto visible de inicio necesitaríamos ocultarlo antes de que se muestre la página, para ello necesitaríamos hacerlo en un evento que se ejecute apenas tengamos acceso a todo el DOM y antes de que se muestre la página. Este evento es sin duda el “domReady”.
A diferencia de otras bibliotecas de AJAX como Mootools, YUI o ExtJs, Prototype no implementa nativamente el evento “domReady”. Pero si buscamos en Google por “prototype domReady” encontramos varias extensiones como esta
Event.onDOMReady(function() {
$('text').hide();
oe24Writer = new e24Writer( 'text', { autostart: true, duration: 1.0, interval: 0.3 });
});De esta forma el texto podrá leerse independientemente de la presencia o no de javascript.
