lenteur exécution jquery

Version imprimable

Bonjour,

J'ai un soucis avec le temps d'exécution de mon jquery.
J'ai un diaporama de 3 images, chaque image est sensée changer au bout de 4 sec. Le problème c'est que le premier affichage dure 13 sec, ensuite c'est bien 4 sec même quand ça revient au début.

Est ce que c'est normal, ou est ce moi qui ai développé comme un cochon ^^
Voici mon code jquery :

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
 
$(document).ready(function() {
 
	$("#deux2").hide();
	$("#trois3").hide();
	$("#img_employe").hide();
        $("#img_search_job").hide();
 
	var imgActive = 1;
	// Lancement du timeout toutes les 4 secondes
	var interval = setInterval(nextImage, 4000);
 
	function nextImage(){
		// Définition de la nouvelle image à afficher
 
		if(imgActive == 1){
		        $("#trois3").fadeOut("slow");
			$("#img_search_job").fadeOut("slow");
 
			$("#un1").fadeIn("slow");
			$("#img_company").fadeIn("slow");
			imgActive++;
		}
		else if(imgActive == 2){
			$("#un1").fadeOut("slow");
			$("#img_company").fadeOut("slow");
 
			$("#deux2").fadeIn("slow");
			$("#img_employe").fadeIn("slow");
			imgActive++;
		}
		else if(imgActive == 3){
			$("#deux2").fadeOut("slow");
			$("#img_employe").fadeOut("slow");
 
			$("#trois3").fadeIn("slow");
			$("#img_search_job").fadeIn("slow");
			imgActive=1;
		}
	}	
});

Et mon code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div class="menu2">
	<ul>
		<li><img id="un"src="img/background_menu2.jpg" alt="entreprise" title="Entreprise"/></li>
		<li><img id="deux"src="img/background_menu2.jpg" alt="salarié" title="Salarié"/></li>
		<li><img id="trois"src="img/background_menu2.jpg" alt="demandeur d'emploi" title=""/></li>
	</ul>
	<ul>
		<li><img id="un1"src="img/background_menu2_hover.png" alt="entreprise" title="Entreprise"/></li>
		<li><img id="deux2"src="img/background_menu2_hover.png" alt="salarié" title="Salarié"/></li>
		<li><img id="trois3"src="img/background_menu2_hover.png" alt="demandeur d'emploi" title=""/></li>
	</ul>
</div>
<div class="img_menu2">
	<img id ="img_company"src="img/welcome_company.jpg" alt="entreprise" title="Espace Entreprise" />	
	<img id ="img_employe"src="img/welcome_employe.jpg" alt="Salarié" title="Espace salarié" />
	<img id ="img_search_job" src="img/welcome_search_job.jpg" alt="Demandeur d'emploi" title="Espace demandeur d'emploi" />
</div>

et mon css :

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
 
.menu2{
	display:block;
	width:250px;
	height:210px;
	display:inline-block;
/*	border:1px solid yellow;*/
}
.menu2 ul{
	position:absolute;
	z-index:2;
	left:0;top:0;
	margin:0;
	padding:0;
	width:250px;
	height:70px;
}
.menu2 ul li{
	margin:0;
	padding:0;
	width:250px;
	height:70px;
	list-style:none inside;
}
.img_menu2{
	position:relative;
	display:inline-block;
	width:755px;
	height:210px;
/*	border:1px solid red;*/
}
.img_menu2 img{
	position:absolute;
	top:0px;
	left:0px;
}

Voilà c'est tout lol.

Merci de votre aide

03/09/2010, 22h40
danielhagnoul

Bonsoir

Je ne vois aucun problème avec le code, il fait ce qu'on lui demande.

J'ai testé sous C6, F4 et IE8, le premier changement d'image se produit dans la 5e seconde, c'est logique.

Vous n'avez pas une autre temporisation quelque part dans le code ?
Où alors un souci avec le chargement des images ?

Je l'ai mis en ligne et j'ai toujours ce temps d'attente au démarrage avec IE, firefox, opéra et safari donc je pense que ça vient de mon code si ça marche bien chez vous.

Voici mon nouveau javascript :

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
 
<script type="text/javascript" src="lib/jquery_min-1-4-2.js"></script>
 
<script type="text/javascript">                            	
 
$(document).ready(function() {
 
  document.getElementById('but_one').onclick = function() {	
     document.getElementById('but_one').style.color = '#4d4d4d';
     document.getElementById('but_two').style.color = '#b1b1b1';
     document.getElementById('but_three').style.color = '#b1b1b1';
 
    $(lstImage).fadeOut("slow");
    $("#img_company").fadeIn("slow");
 
    lstImage = "#img_company";
    clearInterval(interval);
 }			
document.getElementById('but_two').onclick = function() { 
 
	document.getElementById('but_two').style.color = '#4d4d4d';
	document.getElementById('but_three').style.color = '#b1b1b1';
	document.getElementById('but_one').style.color = '#b1b1b1';
 
	$(lstImage).fadeOut("slow");
	$("#img_employe").fadeIn("slow");
 
	lstImage = "#img_employe";
	clearInterval(interval);
}			
document.getElementById('but_three').onclick = function() { 
 
        document.getElementById('but_three').style.color = '#4d4d4d';
	document.getElementById('but_one').style.color = '#b1b1b1';
	document.getElementById('but_two').style.color = '#b1b1b1';
 
	$(lstImage).fadeOut("slow");
	$("#img_search_job").fadeIn("slow");
 
	lstImage = "#img_search_job";
	clearInterval(interval);
}	
 
document.getElementById('but_two').style.color = '#b1b1b1';
document.getElementById('but_three').style.color = '#b1b1b1';
$("#img_employe").hide();
$("#img_search_job").hide();
 
var nxtImage = "#img_company";
var lstImage = "#img_search_job";
var other	 = "#img_employe";
 
var nxtButton= "but_one";
var lstButton= "but_three";
var otherBut = "but_two";
 
var interval = setInterval(nextImage, 4000);
 
function nextImage(){
	// Définition de la nouvelle image à afficher
 
	$(lstImage).fadeOut("slow");
	$(nxtImage).fadeIn("slow");
 
	document.getElementById(lstButton).style.color = '#b1b1b1';
	document.getElementById(nxtButton).style.color = '#4d4d4d';
 
	tmp = nxtImage;
        nxtImage = other;
	other 	 = lstImage;
	lstImage = tmp;
 
	tmp = nxtButton;
	nxtButton = otherBut;
	otherBut = lstButton;
	lstButton = tmp;
}
});

J'ai également changé mon html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<div class="menu2">
	<b id="but_one">Entreprise</b>
	<b id="but_two">Salarié</b>
	<b id="but_three">Demdandeur d'emploi</b>
</div>
 
<div class="img_menu2">
	<img id ="img_company"src="img/welcome_company.jpg" alt="Entreprise" title="Espace Entreprise" />	
	<img id ="img_employe"src="img/welcome_employe.jpg" alt="Salarié" title="Espace salarié" />
	<img id ="img_search_job" src="img/welcome_search_job.jpg" alt="Demandeur d'emploi" title="Espace demandeur d'emploi" />
</div>

Je ne vois vraiment pas d'où vient le problème, c'est presque le seul javascript que j'ai dans la page. Cette page est inclue, est ce que le problème vient de là?

Merci de votre aide