Mettre un preloader pendant le chargement d'un onglet

Version imprimable

07/10/2013, 14h20
diabli73

Mettre un preloader pendant le chargement d'un onglet

Bonjour, j'ai développez un site jsp, bootstrap, hibernate, et j'ai un de mes onglets qui charge beaucoup de ligne et donc lorsque l'on clique sur cet onglet on a un impression de bug pendant le chargement.

J'aimerais mettre un preloader (j'ai déjà trouvé le gif) pendant que la page charge et qu'il s'arrête lorsque l'onglet est chargé (comme sur le site http://www.apple.com/fr/mac/ par exemple).

Quelqu'un peut me dire comment faire?

Merci
07/10/2013, 14h46
OButterlin

Une technique simple consiste à mettre le contenu de ta page dans un <div> et le message d'attente dans un autre <div>.
Lorsque tu soumets ton formulaire ou que tu cliques sur un lien, tu affiches le <div> d'attente.
En fonction du look recherché, tu peux adapter la taille du <div>, par dessus le contenu, à la place du contenu, etc...

Bonjour,

merci pour ton aide.

Donc je lance le premier div puis le deuxième mais je fais comment pour faire disparaitre l'autre je lui met un timer? (par exemple 3sec) comment je fais pour qu'il disparaisse vraiment quand l'autre est chargé?

dans l'exemple ci dessous au debut j'ai mon div loader et en dessous j'ai la div acceuil.

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
 
<div id="loaderImage"></div>
<script type="text/javascript">
	var cSpeed=9;
	var cWidth=180;
	var cHeight=40;
	var cTotalFrames=20;
	var cFrameWidth=180;
	var cImageSrc='images/sprites.gif';
 
	var cImageTimeout=false;
	var cIndex=0;
	var cXpos=0;
	var cPreloaderTimeout=false;
	var SECONDS_BETWEEN_FRAMES=0;
 
	function startAnimation(){
 
		document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';
		document.getElementById('loaderImage').style.width=cWidth+'px';
		document.getElementById('loaderImage').style.height=cHeight+'px';
 
		//FPS = Math.round(100/(maxSpeed+2-speed));
		FPS = Math.round(100/cSpeed);
		SECONDS_BETWEEN_FRAMES = 1 / FPS;
 
		cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);
 
	}
 
	function continueAnimation(){
 
		cXpos += cFrameWidth;
		//increase the index so we know which frame of our animation we are currently on
		cIndex += 1;
 
		//if our cIndex is higher than our total number of frames, we're at the end and should restart
		if (cIndex >= cTotalFrames) {
			cXpos =0;
			cIndex=0;
		}
 
		if(document.getElementById('loaderImage'))
			document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';
 
		cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);
	}
 
	function stopAnimation(){//stops animation
		clearTimeout(cPreloaderTimeout);
		cPreloaderTimeout=false;
	}
 
	function imageLoader(s, fun)//Pre-loads the sprites image
	{
		clearTimeout(cImageTimeout);
		cImageTimeout=0;
		genImage = new Image();
		genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};
		genImage.onerror=new Function('alert(\'Could not load the image\')');
		genImage.src=s;
	}
 
	//The following code starts the animation
	new imageLoader(cImageSrc, 'startAnimation()');
</script>
 
<div id="accueil">
	accueil	
</div>

Essaye ce code, ça te donnera une idée...

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<head>
<script>
function waiting()
{
    document.getElementById("wait-content").style.display = "block";
    document.getElementById("body-content").style.display = "none";
    window.location.assign("http://www.ibm.fr");
}
function restorePage()
{
    document.getElementById("wait-content").style.display = "none";
    document.getElementById("body-content").style.display = "block";
}
 
</script>
</head>
 
<body class="page" onunload="restorePage()">    
 
 <div id="body-content">
<form>
    <input type="text" name="Param1" value="Test"/>
    <input type="button" value="Envoyer" onclick="waiting()"/>
</form>
</div>
 
<div id="wait-content" style="display:none">
    Veuillez patienter...
</div>
 
</body>
 
</html>