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 !

mekal · 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 ?

mekal · 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>

08/06/2011, 13h03	#1
phpphp Invité de passage Inscription : décembre 2004 Messages : 5 Détails du profil Informations forums : Inscription : décembre 2004 Messages : 5 Points : 1 Points : 1	Défilement d'images saccadé sour IE 7 et 8 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 !
	00

08/06/2011, 14h55	#2
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	on peut rien y faire ie 7 et 8 son des navigateurs lents, peut etre en optimisant les images __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

08/06/2011, 17h56	#4
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	vu que flash est indépendant des performance du navigateur oui le rendu sera meilleur __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

08/06/2011, 17h22	#3
phpphp Invité de passage Inscription : décembre 2004 Messages : 5 Détails du profil Informations forums : Inscription : décembre 2004 Messages : 5 Points : 1 Points : 1	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 ?
	00

08/06/2011, 18h16	#5
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 939 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 939 Points : 4 767 Points : 4 767	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...
	00

09/06/2011, 14h51	#6
phpphp Invité de passage Inscription : décembre 2004 Messages : 5 Détails du profil Informations forums : Inscription : décembre 2004 Messages : 5 Points : 1 Points : 1	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email