Mettre un preloader pendant le chargement d'un onglet

**diabli73** · 07/10/2013, 14h20

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

**OButterlin** · 07/10/2013, 14h46

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...

**diabli73** · 07/10/2013, 14h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**OButterlin** · 07/10/2013, 15h03

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Mettre un preloader pendant le chargement d'un onglet

Développement Web en Java

Vue hybride

Discussions similaires

Partager

Partager