Webmaster + Webdesigner + Créateur de projets

Voici un "preloader" qui permettra de charger vos pages avant d'afficher le contenu. Ce "preloader" affiche une image gif animé pendant le chargement avec un arrière-plan blanc.

Voici un exemple de ce que cela peux donner, je vous conseils de ne pas utiliser ce script si vous avez utilisé des "CSS Reset". Et n'utilisez pas une tag "DIV" général en "CSS" appliquant la position "relative" à tous

Voici le code javascript de ce Preloader.

 
 
// Vous pouvez changer la vitesse (speed) (1 == tres rapide)
// Vous pouvez changer la qualité de la transition (1 == best)
// Plus la transition est de qualité, plus la rapidité ralenti et doit être augmenté
var 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";
		clearInterval(timer);
	}
 
}
 
function preload()
{
	if (document.getElementById)
	{
		document.getElementById("preloadIMG").style.visibility="hidden";
		timer = setInterval("opacity()",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(); }
 

Maintenant, veuillez insérer ce code juste après la tag BODY. Prenez notes que l"image du preload doit être mise sur votre serveur et que la source doit être changé tout dépendant de l"edroit ou se trouve votre image.

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

Voilà, maintenant vous possédez un preloader très chic pour vos pages web lourdes.

Tags: Images, Javascript, Preloader, XHTML

Cet article a été publié le Mercredi 13 février 2008 à 20:19 et est classé dans Tutoriels. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.