Buscar en el Blog

miércoles, 6 de agosto de 2014

Precarga tu página con jQuery y CSS


Hay veces en que una pagina es muy pesada o al momento que esta cargando los elementos se ven desordenados.
Vamos  a implementar un ejemplo sencillo y funcional. Usaremos la libreria "JQuery".

Implentacion


<div id="preloader">
    <div id="loader">&nbsp;</div>
</div>


Creamos un archivo style.css y lo guardamos en la carpete csss

body {
    overflow: hidden;
}
/* preloader */
#preloader {
    position: fixed;
    top:0; left:0;
    right:0; bottom:0;
    background: #000;
    z-index: 100;
}
#loader {
    width: 200px;
    height: 200px;
    position: absolute;
    left:50%; top:50%;
    background: url(../img/loader.gif) no-repeat center 0;
    margin:-50px 0 0 -50px;
}


Creamos un archivo "js" llamado scripts.js y la ubicamos en la carpeta "js"


$(window).load(function() {
    $('#preloader').fadeOut('slow');
    $('body').css({'overflow':'visible'});
})

Finalmente el codigo html.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
<title>Preload...</title>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
   
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div id="preloader">
    <div id="loader"></div>
</div>
<div id="main">
 <img src="http://www.imagenzone.net/fondos-de-pantalla/Anime/Fondo-Anime-04.jpg"/>
</div>
</body>
</html>


 Nota: en la carpeta img deben tener el archivo loader.gif



No hay comentarios:

Publicar un comentario