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”]

[/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”]

[/codesyntax]

Comments

  • jose luis
    Responder

    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
    Responder

    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
    Responder

    Excelente, junto lo que estuve buscando!

    Gracias 😉

  • Patagonia
    Responder

    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
    Responder

    Hola, es lo que estoy buscando, pero no consigo que funcione…. un ejemplo sería posible???

    Gracias.

  • iok
    Responder

    GENIAL!!! funciona, muchas gracias.

  • Carlos
    Responder

    Disculpen pero para que sirve el rewrite, primera vez que lo veo :S