Webmaster Webdesigner + + Builder progetti

Ecco un "preloader" che caricherà le pagine prima di visualizzare il contenuto. Questo "preloader" visualizza un'immagine gif animata durante il caricamento con uno sfondo bianco.

Ecco un esempio di quello che può dare, io consiglio di non utilizzare questo script se è stato utilizzato il "Reset CSS". E non usare un tag "DIV" Generale posizione "CSS" utilizzando la "relativa" a tutte le

Ecco il codice javascript di questa 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" ; / / È possibile modificare la velocità (velocità) (1 == molto veloce) / / Si può cambiare la qualità della transizione (1 == migliore) / / la transizione è più qualità, più ozioso e la velocità deve essere aumentato var speed = 10; transizione var = 10 / / formato di GIF animate preloader GIFpreloadLargeur var = 20; GIFpreloadHauteur var = 20; var timer = 0; opacità var = 100; funzione opacità () {opacità = opacità - var transizione oggetto = documento getElementById ("preloader") stile,... oggetto opacità = (opacità / 100);. oggetto MozOpacity = (OPAC / 100);. oggetto KhtmlOpacity = (OPAC / 100);. oggetto filter = "alfa ( opacità = "+ opacità +") "if (opacità <= 0) {document getElementById (." preloader ") Stile visibilità =.." nascosto ";  ,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 ( ) ; } timer = setInterval ("opacità ()", velocità)} else {if (strati document.) {document preloadIMG visibilità = "hidden";.. timer = setInterval ("opacità ()", velocità)} else {document .... tutti preloadIMG stile visibilità = "hidden"; timer = setInterval ("opacità ()", velocità );}}} / / Genera il CSS per il preloader myCSS var; 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 + = "Altezza:" + GIFpreloadHauteur + "px"; myCSS + = "margin-left: -" + (GIFpreloadLargeur / 2) + "px"; myCSS + = "top: 150px; "myCSS + ="} "; myCSS + =" </ style> "/ / scrivere la finestra del documento CSS scrittura (myCSS) / / Esegui finestra onload = function () {precarico ()...; } 

Ora, inserire questo codice subito dopo il tag BODY. Prendere atto che l '"immagine del precarico deve essere impostato sul server e la fonte deve essere cambiata a seconda del" edroit o è la tua immagine.

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

Bene, ora avete un preloader molto elegante per le vostre pagine web pesanti.

Tags: Immagini , Javascript , Preloader , XHTML

Questo articolo è stato pubblicato Mercoledì, 13 Febbraio 2008 alle 20:19 e classificato in Tutorial . È possibile seguire tutte le risposte attraverso il RSS 2.0 feed . Potete lasciare un commento , o trackback dal tuo sito.