Tanto buscar por internet algún preloader ya hecho, más que nada por no perder el tiempo, y al final lo he perdido: no encontré ninguno que me gustara.

• malsup blockui. No hubo forma de que se mostrara mientras se carga la página.
• QueryLoader. Un plugin, demasiado para lo poco que quería hacer. Este tiene una animación muy elegante mientras hace la carga de la página.

Todos los que encontré son más adecuados para hacer las precargas de llamadas ajax o de carga de imágenes en zonas concretas de una página, pero no para la precarga de la página completa.

Al final me he hecho uno:

Primero una capa en que ocultará toda la pantalla, para mostrarla mientras se carga la página.

<div id=“preloader” style=”z-index:40000;position:fixed;height:100%;width:100%;background-color:#fff;opacity: 0.9;filter: alpha(opacity = 90);”>

<div id=“preloaderWrapper” style=”width:150px;margin:20% auto;text-align:center;background:none“>

<img src=“<html:rewrite page=‘/images/logoAnimado.gif’/>“ width=“150″ /><br/>

<img src=“<html:rewrite page=‘/images/loading-grey.gif’/>“/>

</div>

</div>

Con jQuery, al final del método

$(document).ready(function() {

…..

$(“#preloader”).delay(700).fadeOut(“slow”);

}

El delay es sólo para que se retrase un poco y de tiempo a ver el gif animado de carga.

Sólo hay una cosa que no me gusta, en IE6, el gif animado no se ve en movimiento hasta que no finaliza la carga de la página, que es precisamente, cuando desaparece el gif, mala suerte.

También utiliza la validación con el plugin Validator coloreando
los campos que son necesarios.

www.grupocian.com

Lo más complicado ha sido encontrar la forma para que los frameworks javascript que utiliza Typo3 (scriptaculus…), se lleven bien con jQuery.

En el siguiente código podemos ver los archivos insertados por Typo3 en la plantilla y las líneas enlazando al API de Google donde se alojan las librerías jQuery y jQueryUI.

A continuación añadimos un script en el que configuraremos un nuevo símbolo para nuestras funciones jQuery:

<script src="fileadmin/templates/scripts/prototype.js" type="text/javascript"></script>
<script src="fileadmin/templates/scripts/lightbox.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

En el ejemplo añadimos a una capa el efecto slide de la librería jQueryUI.

[javascript]
var j=jQuery.noConflict();
j(function() {
j( "#slideGracias" ).effect(
‘slide’,
{ direction: "up",
distance: "-283" ,
mode: "show"
},
1000
);
}
[/javascript]

El truco está en la línea var j=jQuery.noConflict(). Esto hace que podamos utilizar una j en lugar del símbolo $ típico de jQuery. De esta forma no interferirá con las otras librerías.