Webmaster Webdesigner Builder projects

Here is a "preloader" which will load your pages before displaying the content. This "preloader" displays an image animated gif while loading a white background.

Here is an example of what it can give you advice I do not use this script if you used the "CSS Reset. And do not tag "DIV" General "CSS" position using the "on" all

Here is the Javascript code on this preloader.

 / / You can change the velocity (speed) (1 == very fast)
 / / You can change the quality of the transition (1 == best)
 / / As the transition is, the better the speed slowed down and must be increased
 ; var speed = 10;
 ; var transition = 10;

 / / Size of preloader animated GIF
 ; GIFpreloadLargeur var = 20;
 ; GIFpreloadHauteur var = 20;

 ; var timer = 0;
 ; var opacity = 100; 

 opacity function ()
 (
     opacity = opacity - transition;

     ( "preloader" ) . style ; var object = document. getElementById ("preloader"). stylus;
     opaciT / 100 ) ; object. opacity = (opacity / 100);
     opaciT / 100 ) ; object. MozOpacity = (opacity / 100);
     opaciT / 100 ) ; object. KhtmlOpacity = (opacity / 100);
     + opaciT + ")" ; object. filter = "alpha (opacity =" + opacity + ")"; 

	 opaciT <= 0 ) if (opacity <= 0)
	 (
		 "preloader" ) . style . visibility = "hidden" ; document. getElementById ("preloader"). style. visibility = "hidden";
		 ; clearInterval (timer);
	 )

 )

 function preload ()
 (
	 document. getElementById ) if (document. getElementById)
	 (
		 "preloadIMG" ) . style . visibility = "hidden" ; document. getElementById ("preloadIMG"). style. visibility = "hidden";
		 ,speed ) ; timer = setInterval ("opacity ()", speed);
	 )

	 else
	 (
	   	 document. layers ) if (document. layers)
		 (
			 = "hidden" ; document. preloadIMG. visibility = "hidden";
			 ,speed ) ; timer = setInterval ("opacity ()", speed);
	     )
	         else
		 (
			 . style . visibility = "hidden" ; document. all. preloadIMG. style. visibility = "hidden";
			 ,speed ) ; timer = setInterval ("opacity ()", speed);
		 )
	 )
 )

 / / GENERATE THE CSS FOR PRELOAD
 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> 

  "

 / / WRITING OF CSS
 ( myCSS ) ; window. document. write (myCSS);

 / / IMPLEMENTATION
 ( ) { preload ( ) ; } window. onload = function () (preload ();)

Now, please insert this code after the BODY tag. Take note that the "image of preload must be placed on your server and the source must be changed depending on the" edroit or is your image.

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

Well, now you have a preloader chic for your web pages heavy.

Tags: Images , Javascript , preloader , XHTML

This article was published Wednesday, February 13, 2008 at 20:19 and is filed under Tutorials . You can follow comments through the RSS 2.0 feed . You can leave a response , or trackback from your own site.