Webmaster Webdesigner + + Builder-Projekte

Hier ist eine "preloader", dass Ihre Seiten vor dem Anzeigen der Inhalte zu laden. Diese "preloader" eine animierte GIF-Bild während des Ladens mit einem weißen Hintergrund.

Hier ist ein Beispiel dessen, was es geben kann, würde ich raten davon ab, dieses Skript verwenden, wenn Sie die "CSS Reset" verwendet. Und nicht mit einem Tag "DIV" General "CSS"-Position mit der "relative" für alle

Hier ist die Javascript-Code dieser 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" ; / / Sie können die Geschwindigkeit (speed) (1 == sehr schnell) / / Sie können die Qualität des Übergangs (1 == besten) / / ist der Übergang mehr Qualität zu ändern, mehr im Leerlauf und die Geschwindigkeit erhöht werden muss var speed = 10; var Übergang = 10 / / Größe von animierten GIF preloader GIFpreloadLargeur var = 20; GIFpreloadHauteur var = 20; var timer = 0; var opacity = 100; Opazität function () {opacity = Deckkraft - Übergang var object = Dokument getElementById ("preloader") Stil,... Objektopazität = (Opazität / 100);. Objekt MozOpacity = (OPAC / 100);. Objekt KhtmlOpacity = (OPAC / 100);. Objekt filter = "alpha ( opacity = "+ Deckkraft +") "if (Opazität <= 0) {document getElementById (." preloader ") style = Sichtbarkeit.." hidden ";  ,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 ("opacity ()", Geschwindigkeit)} else {if (document. Schichten) {document preloadIMG Sichtbarkeit = "hidden";.. timer = setInterval ("opacity ()", Geschwindigkeit)} else {document .... alle preloadIMG Stil Sichtbarkeit = "hidden"; timer = setInterval ("opacity ()", speed );}}} / / Erzeugen der CSS für die 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> "/ / Schreiben des CSS-Fenster Dokument zu schreiben (myCSS) / / Run Fenster onload = function () {preload ()...; } 

Nun fügen Sie diesen Code direkt nach dem BODY-Tag. Beachten Sie, dass das "Bild der Vorspannung auf dem Server gesetzt werden muss und die Quelle muss geändert werden, je nach" edroit oder ist Ihr Bild.

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

Nun, jetzt haben Sie eine sehr stilvolle preloader für Ihre Web-Seiten schwer.

Tags: Bilder , Javascript , Preloader , XHTML

Dieser Artikel wurde veröffentlicht mittwoch, 13. Februar, 2008 um 20:19 Uhr und ist abgelegt unter Tutorials . Sie können alle Antworten durch den RSS folgen 2.0 feed . Sie können einen Kommentar hinterlassen , oder trackback von deiner eigenen Seite.