Pre loader de vos pages html

Ce mémo a été publié le 8 septembre 2010 et peut contenir des informations qui peuvent être incomplètes, non mises à jour voir erronées du fait de son ancienneté. N'hésitez pas à compléter votre recherche sur des articles plus récents.

Rate this post

Voici un script efficace pour afficher une image de chargement sur vos pages très lourdes (dans mon cas avec dojo! )

Source : http://www.patrickperron.com/2008/02/13/preloader-xhtml-javascript/

Code javascript à insérer dans le header le page html :

// 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(); }

// 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 = "

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(); }

Lignes à insérer après le body :

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

</div>

Attention tout de même aux script js que vous chargez dans l’en-tête.

Il doivent du coup être ajouté après la ligne insérée après le body.

Je sais, c’est pas beau, mais ça marche !

… pas sous IE8 ! Snif !

Un autre pré loader, cette fois avec DOJO !

… et qui marche sous IE et FF !

http://www.spiffyjr.me/2010/03/03/creating-a-fadein-loader-with-dojo/

Même topo, il faut mettre les script qui provoquent la lenteur du téléchargement après la div dans le body.

Voici le code complet que j’ai testé :

<html>
  <head>
    <title>Loader avec Dojo !</title>
  <style type="text/css">
    body {
  		background: #fff;
  	}

  	#content {
  		text-align: center;
  		width: 100%;
  	}

  	#loader {
  		background: #fff;
  		height: 100%;
  		left: 0;
  		margin: 0;
  		padding: 0;
  		position: absolute;
  		top: 0;
  		vertical-align: middle;
  		width: 100%;
  		z-index: 999;
  	}

  	#loaderInner {
  		-webkit-box-shadow: -1px 1px 5px #888;
  		background-color: #fff;
  		color: #c99800;
  		font-size: 16px;
  		padding: 5px 13px;
  		text-align: center;
  	}

  </style>

  <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">
     	//CDATA[
  	dojo.require("dojo.parser");
  	dojo.addOnLoad(_initLoader);

  	function _initLoader() {
  		var content = dojo.byId("content");
  		var loader = dojo.byId("loader");

  		// Parse the content manually
  		dojo.parser.parse(content);

  		// Fade the loader div out
  		dojo.fadeOut({
  			node: loader,
  			duration: 250,
  			onEnd: function() {
  				loader.style.display = "none";
  			}
  		}).play(250);
  	}
      //]]>
  </script>

  <link rel="stylesheet" type="text/css" href="dojo/dijit/themes/claro/claro.css" />

  </head>
  <body class="claro">
    <div id="loader"><div id="loaderInner"><img src="loading.gif" alt="" /></div></div>

    <script type='text/javascript'>

      dojo.require("dijit.form.FilteringSelect");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dijit.form.NumberTextBox");

      // Les scripts qui ralentissent le chargement

    </script>

    <div id="content">
      Le contenu !!!
    </div>
  </body>
</html>

<html>

<head>

<title>Loader avec Dojo !</title>

body {

background: #fff;

}

#content {

text-align: center;

width: 100%;

}

#loader {

background: #fff;

height: 100%;

left: 0;

margin: 0;

padding: 0;

position: absolute;

top: 0;

vertical-align: middle;

width: 100%;

z-index: 999;

}

#loaderInner {

-webkit-box-shadow: -1px 1px 5px #888;

background-color: #fff;

color: #c99800;

font-size: 16px;

padding: 5px 13px;

text-align: center;

}

</style>

//CDATA[

dojo.require("dojo.parser");

dojo.addOnLoad(_initLoader);

function _initLoader() {

var content = dojo.byId("content");

var loader = dojo.byId("loader");

// Parse the content manually

dojo.parser.parse(content);

// Fade the loader div out

dojo.fadeOut({

node: loader,

duration: 250,

onEnd: function() {

loader.style.display = "none";

}

}).play(250);

}

//]]>

</script>

</head>

dojo.require("dijit.form.FilteringSelect");

dojo.require("dojo.data.ItemFileReadStore");

dojo.require("dijit.form.NumberTextBox");

// Les scripts qui ralentissent le chargement

</script>

Le contenu !!!

</div>

</body>

</html>

Pour l’image loading.gif, je suis allé sur http://www.preloaders.net/

Un autre pré loader, cette fois avec DOJO !

Laisser un commentaire Annuler la réponse