[SRC] Preloader XHTML en Javascript
bonjour j'ai trouvé et testé ce script sur le preloader qui marche bien,
Le “preloader” affiche une image gif animé pendant le chargement ,
Voici le code javascript de ce Preloader.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| <script type="text/javascript">
// 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(); }
</script> |
Le code juste après la balise Body
Code:
<div id="preloader"><div id="preloadIMG"><img src="loading.gif" alt="" /></div></div>
