Webmaster Webdesigner + + Builder proyectos

Aquí hay un "preloader" que carga las páginas antes de mostrar el contenido. Este "preloader" muestra una imagen GIF animada durante la carga con un fondo blanco.

Aquí está un ejemplo de lo que puede dar, yo aconsejaría no utilizar esta secuencia de comandos si se ha utilizado el "Reset CSS". Y no utilice la etiqueta "div" General "CSS", posición con la "relativa" a todos los

Aquí está el código javascript de esta preloader.

 / / Se puede cambiar la velocidad (velocidad) (1 == muy rápido)
 / / Se puede cambiar la calidad de la transición (1 == mejor)
 / / La transición es más calidad, más inactividad y la velocidad debe ser mayor
 ; var velocidad = 10;
 ; var transición = 10;

 / / Tamaño de preloader a GIF animado
 ; GIFpreloadLargeur var = 20;
 ; GIFpreloadHauteur var = 20;

 ; var contador = 0;
 ; var opacidad = 100; 

 función de la opacidad ()
 {
     opacidad = opacidad - transición;

     ( "preloader" ) . style ; var objeto = documento getElementById ("preloader") de estilo..;
     opaciT / 100 ) ; . objeto opacidad = (opacidad / 100);
     opaciT / 100 ) ; . MozOpacity objeto = (OPAC / 100);
     opaciT / 100 ) ; . KhtmlOpacity objeto = (OPAC / 100);
     + opaciT + ")" ; los objetos de filtro = "alpha (opacity =" + opacidad + ")". 

	 opaciT <= 0 ) if (opacidad <= 0)
	 {
		 "preloader" ) . style . visibility = "hidden" ; ... documento getElementById ("preloader") estilo visibilidad = "hidden";
		 ; clearInterval (timer);
	 }

 }

 precarga function ()
 {
	 document. getElementById ) if (getElementById document.)
	 {
		 "preloadIMG" ) . style . visibility = "hidden" ; documento getElementById ("preloadIMG") estilo visibilidad = "hidden"...;
		 ,speed ) ; timer = setInterval ("opacidad ()", velocidad);
	 }

	 más
	 {
	   	 document. layers ) if (capas document.)
		 {
			 = "hidden" ; .. documento preloadIMG visibilidad = "hidden";
			 ,speed ) ; timer = setInterval ("opacidad ()", velocidad);
	     }
	         más
		 {
			 . style . visibility = "hidden" ; documentar todos los visibilidad preloadIMG style = "hidden"....;
			 ,speed ) ; timer = setInterval ("opacidad ()", velocidad);
		 }
	 }
 }

 / / Generar CSS de precarga
 var myCSS;
 myCSS = " 
  ; <style type= \" text/css \"> ";

 myCSS + = "html, body {height: auto; margin: 0px; padding: 0px;}";

 myCSS + = "# {preloader";
 myCSS + = "position: fixed;"
 myCSS + = "background-color: white;"
 myCSS + = "width: 100%;"
 myCSS + = "height: 100%;"
 myCSS + = "display: block;"
 myCSS + = "z-index: 100000;"
 myCSS + = "}";

 myCSS + = "# {preloadIMG";
 myCSS + = "position: absolute;"
 myCSS + = "left: 50%;"
 ; myCSS + = "width:" + GIFpreloadLargeur + "px";
 ; myCSS + = "height:" + GIFpreloadHauteur + "px";
 GIFpreloadLargeur / 2 ) + "px;" ; myCSS + = "margin-left: -" + (GIFpreloadLargeur / 2) + "px";
 myCSS + = "top: 150px;"
 myCSS + = "}";

 myCSS + = "</ style> 

  ";

 / / Escribir el CSS
 ( myCSS ) ; . ventana del documento de escritura (myCSS).;

 / / Ejecutar
 ( ) { preload ( ) ; } . ventana onload = function () {precarga ();}

Ahora, introduzca este código justo después de la etiqueta BODY. Tome en cuenta que la "imagen de la precarga se debe establecer en su servidor y la fuente debe ser cambiado en función de la" edroit o su imagen.

 <div id="preloader">
 <div id="preloadIMG"> src = "loading.gif" <img alt="" /> </ div>
 </ Div>

Bueno, ahora usted tiene un preloader muy elegante para sus páginas web pesada.

Tags: Imágenes , Javascript , Preloader , XHTML

Este artículo fue publicado Miércoles, 13 de febrero 2008 a las 20:19 y está clasificada bajo: Tutoriales . Puedes seguir las respuestas a través del RSS 2.0 feed . Puede dejar un comentario , o trackback desde tu propio sitio.