Lenteur animation javascript avec IE8/Mootools 1.1
Bonjour
J'ai créé un script tout simple qui permet de faire défiler en continu 3 images identiques dans un bandeau à la manière d'un journal.
Avec Firefox, Opera, IE7 le défilement est normal.
Avec IE8, c'est très très lent, sauf si j'active l'affichage de compatibilité.
Est-ce du à mon code ou à un réel problème de compatibilité. J'utilise Mootools 1.1.
Merci !
JS
******************
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
| window.addEvent('domready', function() {
setInterval("defilwood()",10);
//***************
});
function defilwood() {
var posleftfilm1=$("filmbandeau1").getStyle('left').toInt();
var posleftfilm2=$("filmbandeau2").getStyle('left').toInt();
var posleftfilm3=$("filmbandeau3").getStyle('left').toInt();
if (parseInt(posleftfilm1) <= -340) $("filmbandeau1").setStyle('left',680);
if (parseInt(posleftfilm1) > -340) $("filmbandeau1").setStyle('left',(parseInt(posleftfilm1)-1));
if (parseInt(posleftfilm2) <= -340) $("filmbandeau2").setStyle('left',680);
if (parseInt(posleftfilm2) > -340) $("filmbandeau2").setStyle('left',(parseInt(posleftfilm2)-1));
if (parseInt(posleftfilm3) <= -340) $("filmbandeau3").setStyle('left',680);
if (parseInt(posleftfilm3) > -340) $("filmbandeau3").setStyle('left',(parseInt(posleftfilm3)-1));
}
css
******************
#filmfenetre {position:absolute;
left:444px;
top:157px;
width:556px;
height:22px;
z-index:300;
clip:rect(0px, 556px, 22px, 0px);
overflow:hidden;
}
#filmbandeau1 {position:absolute;
left:0px;
top:0px;
width:340px;
height:22px;
}
#filmbandeau2 {position:absolute;
left:340px;
top:0px;
width:340px;
height:22px;
}
#filmbandeau3 {position:absolute;
left:680px;
top:0px;
width:340px;
height:22px;
}
PHP inclu dans la page
*********************
<?php
echo "<div id=\"filmfenetre\">\n";
echo "<div id=\"filmbandeau1\"><img src=\"imgsite/bandeauwood.jpg\" alt=\"agencement et construction bois\" title=\"agencement et construction bois\"></div>\n";
echo "<div id=\"filmbandeau2\"><img src=\"imgsite/bandeauwood.jpg\" alt=\"agencement et construction bois\" title=\"agencement et construction bois\"></div>\n";
echo "<div id=\"filmbandeau3\"><img src=\"imgsite/bandeauwood.jpg\" alt=\"agencement et construction bois\" title=\"agencement et construction bois\"></div>\n";
echo "</div>\n";
?> |
