Webmaster Webdesigner Builder progetti

Qui è un "preloader", che caricherà le pagine prima di visualizzare il contenuto. Questo "preloader" visualizza una immagine GIF animata durante il caricamento di uno sfondo bianco.

Ecco un esempio di quello che può darti consigli io non uso questo script se si è utilizzato il "CSS Reset. E non il tag "DIV" Generale "posizione" CSS utilizzando il "su" tutti

Ecco il codice javascript di questa preloader.

 / / È possibile cambiare la velocità (velocità) (1 == molto veloce)
 / / È possibile modificare la qualità della transizione (1 == migliore)
 / / Come la transizione è, migliore è la velocità rallentata e deve essere aumentato
 ; var speed = 10;
 ; transizione var = 10;

 / / Dimensione del preloader GIF animate
 ; GIFpreloadLargeur var = 20;
 ; GIFpreloadHauteur var = 20;

 ; timer var = 0;
 ; opacità var = 100; 

 opacità function ()
 (
     opacità = opacità - di transizione;

     ( "preloader" ) . style ; var = oggetto del documento. getElementById ("preloader"). stilo;
     opaciT / 100 ) ; oggetto. opacità = (opacità / 100);
     opaciT / 100 ) ; oggetto. MozOpacity = (opacità / 100);
     opaciT / 100 ) ; oggetto. KhtmlOpacity = (opacità / 100);
     + opaciT + ")" ; oggetto. filtro alpha = "(opacità =" + opacità + ")"; 

	 opaciT <= 0 ) if (opacità <= 0)
	 (
		 "preloader" ) . style . visibility = "hidden" ; documento. getElementById ("preloader"). stile. visibilità = "nascosto";
		 ; clearInterval (timer);
	 )

 )

 funzione di precarico ()
 (
	 document. getElementById ) if (document. getElementById)
	 (
		 "preloadIMG" ) . style . visibility = "hidden" ; documento. getElementById ("preloadIMG"). stile. visibilità = "nascosto";
		 ,speed ) ; timer = setInterval ("opacità ()", velocità);
	 )

	 altro
	 (
	   	 document. layers ) if (strati document.)
		 (
			 = "hidden" ; documento. preloadIMG. visibilità = "nascosto";
			 ,speed ) ; timer = setInterval ("opacità ()", velocità);
	     )
	         altro
		 (
			 . style . visibility = "hidden" ; . Tutti. PreloadIMG documento. Stile. Visibilità = "nascosto";
			 ,speed ) ; timer = setInterval ("opacità ()", velocità);
		 )
	 )
 )

 / / Generazione di CSS di precarico
 myCSS var;
 myCSS = " 
  ; <style type= \" \"> text/css ";

 myCSS + = "html, corpo (altezza: 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> 

  "

 / / Scrittura di CSS
 ( myCSS ) ; finestra. documento. write (myCSS);

 / / Implementazione
 ( ) { preload ( ) ; } finestra. onload = function () (precarico ();)

Ora, vi preghiamo di inserire questo codice dopo il tag BODY. Prendere atto che la "immagine di precarico deve essere posto sul tuo server e l'origine deve essere cambiato funzione dell '« or edroit è la tua immagine.

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

Bene, ora avete un preloader chic per le tue pagine web pesanti.

Tags: Immagini , Javascript , preloader , XHTML

Questo articolo è stato pubblicato Mercoledì, 13 Febbraio 2008 alle 20:19 e classificato in Tutorial . Puoi seguire i commenti tramite il RSS 2.0 feed . Puoi lasciare una risposta , oppure trackback dal tuo sito.