Webmaster + Web Designer + Builder projects

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

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

Here's 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)
 / / Transition is more quality, more speed slowed and should be increased
 ; var speed = 10;
 ; var transition = 10;

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

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

 opacity function ()
 {
     opacity = opacity - transition;

     ( "preloader" ) . style ; var object = document. getElementById ("preloader"). style;
     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 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;"
 GIFpreloadLargeur / 2 ) + "px;" ; myCSS + = "margin-left: -" + (GIFpreloadLargeur / 2) + "px;"
 myCSS + = "top: 150px;"
 myCSS + = "}";

 myCSS + = "</ style> 

  ";

 / / WRITE THE CSS
 ( myCSS ) ; window. document. write (myCSS);

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

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

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

Well, now you have a very smart preloader 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 comment , or trackback from your own site.