Webdesigner Webmaster Creador de proyectos de

Aquí es un "preloader" que carga las páginas antes de mostrar el contenido. Este "preloader" muestra un gif animado al cargar un fondo blanco.

Aquí está un ejemplo de lo que puede dar consejos no usar este script si ha utilizado el botón de reinicio "de CSS. Y no se etiqueta "DIV" General "CSS", posición con la "a" todos los

Aquí está el código JavaScript en el preloader.

 / / Se puede cambiar la velocidad (velocidad) (1 == muy rápido)
 / / Se puede cambiar la calidad de la transición (1 == mejor)
 / / Como la transición es la calidad sobre la velocidad del más lento y debe aumentarse
 ; var velocidad = 10;
 ; transición var = 10;

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

 ; var timer = 0;
 ; opacidad var = 100; 

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

     ( "preloader" ) . style ; objeto var = documento. getElementById ( "preloader"). estilete;
     opaciT / 100 ) ; objeto. opacity = (opacity / 100);
     opaciT / 100 ) ; objeto. MozOpacity = (opacity / 100);
     opaciT / 100 ) ; objeto. KHTMLOpacity = (opacity / 100);
     + opaciT + ")" ; objeto. filter = "alpha (opacity =" + opacity + ")"; 

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

 )

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

	 algo más
	 (
	   	 document. layers ) if (capas document.)
		 (
			 = "hidden" ; documento. preloadIMG. visibility = "hidden";
			 ,speed ) ; temporizador = setInterval ( "opacidad ()", velocidad);
	     )
	         algo más
		 (
			 . style . visibility = "hidden" ; documento. todos. preloadIMG. estilo. visibility = "hidden";
			 ,speed ) ; temporizador = setInterval ( "opacidad ()", velocidad);
		 )
	 )
 )

 / / Generar el CSS para PRECARGA
 var myCSS;
 myCSS = " 
  ; type= <style \" text/css \"> ";

 myCSS + = "html, (cuerpo 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 CSS
 ( myCSS ) ; ventana. documento. escribir (myCSS);

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

Ahora, por favor introduzca el código siguiente después de la etiqueta BODY. Tome nota de que la "imagen de la precarga debe ser colocado en su servidor y la fuente debe ser cambiado en función de la" edroit o es su imagen.

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

Bueno, ahora usted tiene un preloader para su chic páginas web pesados.

Etiquetas: Imágenes, Javascript, Preloader, XHTML

Este artículo fue publicado el miércoles, febrero 13, 2008 at 20:19 and is filed under Tutoriales. Puede seguir los comentarios a través de la alimentación el 2,0 RSS. Puedes dejar un comentario o un trackback desde tu propio sitio.