Défilement d'images saccadé sour IE 7 et 8

**phpphp** · 08/06/2011, 13h03

Bonjour,

J'ai un script qui réalise le défilement horizontal continu de 4 images. Le défilement est très fluide sur Firefox et Chrome mais sous IE 7 et 8 il y a des sautes d'image avec des petits flashs qui apparaissent.

J'ai testé sur 3 PC différents en changeant la résolution et la fréquence, le résultat est toujours le même.

Voici le lien vers une page de tests incluant le script (pour simplifier le test, j'ai mis tout le code dans un seul fichier).

http://www.cachemireland.com/travail/testSlider.htm

Merci d'avance si vous avez une solution !

Invité · 08/06/2011, 14h55

on peut rien y faire ie 7 et 8 son des navigateurs lents, peut etre en optimisant les images

**phpphp** · 08/06/2011, 17h22

Pas très encourageant ...

J'ai essayé en remplaçant les images par de simples carrés de couleurs (4Ko par image), le problème est certes moins visible mais toujours là. En mettant des images de faible hauteur (environ 200px) et en les faisant défiler plus rapidement ou alors très lentement, le problème n'est presque plus visible mais ça n'est pas une solution. Apparement le fait d'avoir des images d'une hauteur importante aggrave sensiblement le phénomène.

Est-ce qu'en Flash le rendu serait meilleur ?

Invité · 08/06/2011, 17h56

vu que flash est indépendant des performance du navigateur oui le rendu sera meilleur

**NoSmoking** · 08/06/2011, 18h16

Bonjour,
as tu essayais de jouer sur la durée du déplacement
as tu essayais avec la dernière version de jQuery
as tu essayais avec une seule image au lieu de 4 et de mouver celle ci

je te rassures ça guenille également sur FF, Opera, Safari et Chrome...

**phpphp** · 09/06/2011, 14h51

Si je change la durée du déplacement, c'est un peu mieux en allant soit très vite, soit très lentement, mais ce n'est pas l'effet que je souhaite
J'ai essayé la dernière version JQuery, c'est pareil
Et avec 1 seule image, toujours pareil

Sur FF, Safari et Chrome le résultat est quand même nettement meilleur. C'est vrai que ce n'est pas toujours parfaitement fluide mais au moins je ne vois pas les 2 ou 3 rayures horizontales qui apparaissent systématiquement sur IE comme si l'image était découpée horizontalement

Je vais tenter sur Flash pour voir la différence

**danielhagnoul** · 12/06/2011, 20h42

Bonsoir

Voici ma version. Le script d'animation se trouve dans $(window).load(function(){...}); plutôt que dans $(function(){...}); car l'animation doit démarrer uniquement lorsque la page est complètement chargée. J'ai testé sous Firefox 5, Chrome 12, IE 9, IE 9 en mode IE 8 et IE 9 en mode IE 7.

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* --- */
		.divImages {
			height:560px;	
			width: 364px;
			overflow: hidden;
			position: relative;
			left: 0;
			top: 0;
			border: 0px;
			margin: 0;
			padding: 0;
		}
		.image_reel {
			position:relative;
			top: 0; 
			left: 0;
		}
		.image_reel img {
			float: left;
		}
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<div class="divImages">
			<div class="image_reel">
				<a href="#"><img src="http://www.cachemireland.com/travail/images/fashionSurUnBanc.jpg"/></a>
				<a href="#"><img src="http://www.cachemireland.com/travail/images/fashionZunino.jpg"/></a>
				<a href="#"><img src="http://www.cachemireland.com/travail/images/FashionOlivierLapidus.jpg"/></a>
				<a href="#"><img src="http://www.cachemireland.com/travail/images/FashionYokoHoshikawa.jpg"/></a>
				<a href="#"><img src="http://www.cachemireland.com/travail/images/fashionSurUnBanc.jpg"/></a>
			</div>
		</div>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-12T20:15:00.000+02:00" pubdate>2011-06-12</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script>
		$(function(){
 
		});
 
		$(window).load(function(){
			var numPhoto = 0, transition = 1000, duree = 3000,
				image_reelPosition = 0,
				imageWidth = $(".divImages").width(),
				imageSum = $(".image_reel img").size(),
				imageReelWidth = imageWidth * imageSum,
				objImgReel = $(".image_reel");
 
			objImgReel.css({'width' : imageReelWidth});
 
			var rotate = function(){	
				numPhoto++;
 
				if (numPhoto > imageSum-1){
					numPhoto = 0;
				}
 
				image_reelPosition = numPhoto * imageWidth;
 
				if (image_reelPosition > 0){
					objImgReel.animate({left: -image_reelPosition}, transition);
				} else {
					objImgReel.css({"left": "0px"});
				}
 
				setTimeout(rotate, duree);
			}; 
 
			setTimeout(rotate, duree);
		});
	</script>
</body>  
</html>

Défilement d'images saccadé sour IE 7 et 8

JavaScript

Discussions similaires

Partager

Partager