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"> </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
<div id="loader"> </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
Nota: solo los miembros de este blog pueden publicar comentarios.