Truco: Preloader de página con jQuery sin plugin
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.
[codesyntax lang=»javascript»]
<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");
}
[/codesyntax]
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.
A petición de uno de los comentaristas…. El código entero sería éste:
[codesyntax lang=»html4strict»]
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function() {
$("#preloader").delay(700).fadeOut("slow");
}
</script>
</head>
<body>
<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>
</body>
</html>
[/codesyntax]
Comments
jose luis
Buen post, yo hago algo parecido con las pestañas de #tabs de jquery. Cuando las cargas con mucho contenido primero te muestra los div uno detrás de otro y al terminar de cargar la web te ejecuta el jquery y te lo convierte en pestañas.
Para evitar esto lo que hago es ocultar el div que contiene las pestañas via css y hacer un show despues de ejecutar el jquery que las convierte en pestañas.
Pablo García
Eso exactamente es lo que me pasaba a mi. Me lié a buscar el preloader por culpa de las pestañas de jQuey UI, que sobre todo, en Explorer tardan muchísimo en mostrarse bien, Bueno… muchísimo… un par de segundos de más… jejjee.
Gracias por tu comentario, un saludo.
Artsmorgan
Excelente, junto lo que estuve buscando!
Gracias 😉
Patagonia
Por fin un script liso, corto y efectivo para la precarga, tantos script pero tan pesados que da lo mismo lanzar la pagina sin esas precargas..
gracias
muy buen articulo
victor
iok
Hola, es lo que estoy buscando, pero no consigo que funcione…. un ejemplo sería posible???
Gracias.
iok
GENIAL!!! funciona, muchas gracias.
Carlos
Disculpen pero para que sirve el rewrite, primera vez que lo veo :S