Truco: Preloader de página con jQuery sin plugin

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]

About Post Author

pablocia

Lo mejor para observar la corriente es no estar en ella, así que toma distancia, piensa y verás la solución. <a href="https://es-es.facebook.com/visualxtudio">Facebook</a>
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

7 thoughts on “Truco: Preloader de página con jQuery sin plugin

  1. 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.

  2. 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.

  3. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entrada anterior Truco: Cuando un div con scroll no funciona en IE6 y IE7
Entrada siguiente Prefiero Google+ a Facebook, pero….