Webmaster Webdesigner Builder proyectos

Aquí está un preloader "que se carga las páginas antes de mostrar el contenido. Esta preloader "" muestra una imagen gif animado durante la carga de un fondo blanco.

Aquí está un ejemplo de lo que puede darle consejos que no uso este script si utilizó el "Reset CSS. Y no se etiqueta "DIV" General "CSS" posición con la "a" todos los

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

 speed = 10 ; var transition = 10 ; // Dimensions du preloader en GIF animé var GIFpreloadLargeur = 20 ; var GIFpreloadHauteur = 20 ; var timer= 0 ; var opaciT = 100 ; function opacity ( ) { opaciT = opaciT - transition; var object = document. getElementById ( "preloader" ) . style ; object. opacity = ( opaciT / 100 ) ; object. MozOpacity = ( opaciT / 100 ) ; object. KhtmlOpacity = ( opaciT / 100 ) ; object. filter = "alpha(opacity=" + opaciT + ")" ; if ( opaciT <= 0 ) { document. getElementById ( "preloader" ) . style . visibility = "hidden" ; clearInterval ( timer ) ; } } function preload ( ) { if ( document. getElementById ) { document. getElementById ( "preloadIMG" ) . style . visibility = "hidden" ; timer = setInterval ( "opacity()" ,speed ) ; } else { if ( document. layers ) { document. preloadIMG . visibility = "hidden" ; timer = setInterval ( "opacity()" ,speed ) ; } else { document. all . preloadIMG . style . visibility = "hidden" ; timer = setInterval ( "opacity()" ,speed ) ; } } } // GÉNÉRER LE CSS POUR LE PRELOADER 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;" ; myCSS += "margin-left:-" + ( GIFpreloadLargeur / 2 ) + "px;" ; myCSS += "top:150px;" ; myCSS += "}" ; myCSS += "</style> " ; // ÉCRITURE DES CSS window. document . write ( myCSS ) ; // ÉXÉCUTION window. onload = function ( ) { preload ( ) ; } / / Se puede cambiar la velocidad (velocidad) (1 == muy rápido) / / Se puede cambiar la calidad de la transición (1 mejores ==) / / Más de la transición, mayor será la velocidad de frenado y se deberá aumentar var velocidad = 10; transición var = 10, / / Volumen de preloader GIF animado GIFpreloadLargeur var = 20; var GIFpreloadHauteur = 20; temporizador var = 0; opacidad var = 100; función de la opacidad () (opacidad opacidad = - var transición objeto = documento. getElementById ("preloader"). stylus; objeto. opacidad = (opacidad / 100); objeto. MozOpacity = (opacidad / 100); objeto. KhtmlOpacity = (opacidad / 100); objeto. filter = "alfa ( opacidad = "+ + opacidad") "si (opacidad <= 0) (getElementById document. (" preloader "). estilo. visibilidad =" hidden "clearInterval (timer);)) precarga función () (if (documento . getElementById) (getElementById document. ("preloadIMG). estilo. visibilidad =" hidden "; temporizador = setInterval (" opacidad () ", velocidad)) else (si (capas document.) (document. preloadIMG. visibilidad = "ocultos"; temporizador = setInterval ("opacidad ()", velocidad)) else (document. todos. preloadIMG. estilo. visibilidad = "hidden"; temporizador = setInterval ("opacidad ()", );))) velocidad / / generar el CSS para myCSS var PRECARGA; myCSS = "<style type= \"> text/css \""; myCSS + = "html, body (altura: auto; margin: 0px; padding: 0px;) ; myCSS + = "# preloader ("; myCSS + = "position: fixed;" myCSS + = "background-color: blanco;" 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 + =" Altura: "+ GIFpreloadHauteur +" px "; myCSS + =" margin-left : - "+ (GIFpreloadLargeur / 2) +" px "; myCSS + =" top: 150px; "myCSS + =") "; myCSS + =" </ style> "/ / ESCRITURA DE ventana CSS. Documento . escribir (myCSS) / / Windows que se ejecuta. onload = function () (precarga ();) 

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

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

Bueno, ahora usted tiene una pesada preloader chic para sus páginas web.

Etiquetas: Imágenes , Javascript , preloader , XHTML

Este artículo fue publicado Miércoles, 13 de febrero 2008 a las 20:19 y está archivada en Tutoriales . Puede seguir los comentarios a través de la RSS 2.0 feed . Puedes dejar una respuesta , o trackback desde tu propio sitio.