Webmaster Webdesigner Builder-Projekte

Hier ist eine "preloader", die Ihre Seiten vor dem Anzeigen der Inhalte geladen werden. Diese "preloader" zeigt ein Bild animiertes GIF während des Ladens einen weißen Hintergrund.

Hier ist ein Beispiel dafür , was es geben kann Ihnen Ratschläge, die ich nicht verwenden, wenn Sie dieses Skript benutzt den Reset "CSS. Und nicht zu Tag "DIV" General "CSS"-Position mit dem "auf" alle

Hier ist die Javascript-Code dieser preloader.

 / / Sie können die Geschwindigkeit (speed) (1 == sehr schnell)
 / / Sie können die Qualität des Übergangs (1 == besten)
 / / Da der Übergang ist, desto besser die Geschwindigkeit verlangsamt und muss erhöht werden
 ; var speed = 10;
 ; var Übergang = 10;

 / / Größe des Preloader animierte GIF-Dateien
 ; GIFpreloadLargeur var = 20;
 ; GIFpreloadHauteur var = 20;

 ; var timer = 0;
 ; Opazität var = 100; 

 Opazität function ()
 (
     Deckkraft = Deckkraft - Übergang;

     ( "preloader" ) . style ; var object = Dokument. getElementById ("preloader"). Stylus;
     opaciT / 100 ) ; Objekt. Opazität = (Opazität / 100);
     opaciT / 100 ) ; Objekt. MozOpacity = (Opazität / 100);
     opaciT / 100 ) ; Objekt. KhtmlOpacity = (Opazität / 100);
     + opaciT + ")" ; Objekt. Filter = "alpha (Opazität =" + + Deckkraft ")"; 

	 opaciT <= 0 ) if (Trübung <= 0)
	 (
		 "preloader" ) . style . visibility = "hidden" ; Dokument. getElementById ("preloader"). Stil. Sichtbarkeit = "hidden";
		 ; clearInterval (Timer);
	 )

 )

 Funktion preload ()
 (
	 document. getElementById ) if (document.all getElementById)
	 (
		 "preloadIMG" ) . style . visibility = "hidden" ; Dokument. getElementById ("preloadIMG"). Stil. Sichtbarkeit = "hidden";
		 ,speed ) ; Timer = setInterval ("opacity ()", Geschwindigkeit);
	 )

	 sonst
	 (
	   	 document. layers ) if (document.all Schichten)
		 (
			 = "hidden" ; Dokument. preloadIMG. Sichtbarkeit = "hidden";
			 ,speed ) ; Timer = setInterval ("opacity ()", Geschwindigkeit);
	     )
	         sonst
		 (
			 . style . visibility = "hidden" ; Dokument. alle. preloadIMG. Stil. Sichtbarkeit = "hidden";
			 ,speed ) ; Timer = setInterval ("opacity ()", Geschwindigkeit);
		 )
	 )
 )

 / / Erzeugen der CSS für Vorspannung
 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> 

  "

 / / Schreiben von CSS
 ( myCSS ) ; Fenster. Dokument. write (myCSS);

 / / Implementierung
 ( ) { preload ( ) ; } Fenster. onload = function () (preload ();)

Nun, bitte fügen Sie diesen Code nach dem BODY-Tag. Beachten Sie, dass das "Bild der Vorspannung muss auf Ihrem Server abgelegt werden und die Quelle muss in Abhängigkeit von der" edroit geändert werden, oder ist Ihr Bild.

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

Nun, jetzt hast du einen preloader chic für Ihre Web-Seiten schwer.

Tags: Bilder , Javascript , Preloader , XHTML

Dieser Artikel erschien Mittwoch, 13. Oktober 2008 um 20:19 und ist abgelegt Februar unter Tutorials . Du kannst die Kommentare verfolgen RSS durch die 2.0 Feed verfolgen . Du kannst Antwort hinterlassen , oder trackback von deiner eigenen Seite.