Demande de conseils pour optimisation

Salut à tous,

J'ai fait un script permettant de naviguer sur un site tout en longueur (6000px) de gauche à droite en déplaçant le curseur sur les bords droit et gauche de la fenêtre.

Je souhaiterai l'optimiser au mieux selon vos conseils:

(J'ai réuni tout en une page pour ceux qui veulent testé et faire un simple copié/collé)

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" charset="utf-8" />
<style>
body{
    margin:0;
    padding:0;
    width:6000px;
}
.ps{
    border:3px solid red;
    width:6000px;
    left:10%;top:20%;
}
#p1{
    border:1px solid black;
    display:inline-block;
    width:1500px;
}
#p2{
    display:inline-block;
    border:1px solid black;
    width:1500px;
}
#p3{
    display:inline-block;
    border:1px solid black;
    width:1500px;
}
#droite{
    right:0;top:0;bottom:0;
    position:fixed;
    border: 2px solid black;
    height:100%;
    width:100px;
    z-index:2;
}
#gauche{
    border: 2px solid black;
    height:100%;
    position:fixed;
    width:100px;
    left:0;top:0;bottom:0;
    z-index:2;
}
#gauche:hover, #droite:hover{
    background-color:rgba(153,153,102,1);
    opacity:0.4;
} 
</style>
</head>
 
<body>
<div id='gauche'>gauche</div>
<div id='droite'>droite</div>
<div class='ps'>
<div id='p1'><h1>Para 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
    </div>
<div id='p2'><h1>para 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
</div>
<div id='p3'><h1>para 3</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
      <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>
      <p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
</div>
</div>
 
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script >
$(function() {
 
        var a = 0,
            $l = $(window).width(),
            droite = $('#droite'),
            gauche = $('#gauche'),
            interval;
 
 
            droite.mouseenter(function(){
 
                interval = setInterval(function(){
                    if(a<6000){
                        a+=10;
                        droite.html(a);
                        $('body').animate({
                            scrollLeft:a               
                        },10);
                    }
                },10);             
            });
 
            droite.mouseleave(function(){
                clearInterval(interval);           
                droite.html(a);
            });
 
            gauche.mouseenter(function(){
 
                    interval = setInterval(function(){
                        if(a>0){
                            a-=10;
                            gauche.html(a);
                            $('body').animate({
                                scrollLeft:a           
                            },10); 
                        }
                    },10);
 
            });
 
            gauche.mouseleave(function(){          
                clearInterval(interval);       
                gauche.html(a);
            });  
});
</script>
 
 
</body>
</html>

Je rencontre plusieurs problèmes:

-Sur IE 10, pour je ne sais quelle raison, l'évènement sur mes div ne s'effectue que de manière aléatoire c'est bizarre. Je suppose que le problème ne viens pas nécéssairement du Js puisque même le :hover de mes div à un déclenchement capricieux.

-Sur mozilla20 et IE10: la variable 'a' s'incrémente bien mais le scrolling associé aux évènements ne fonctionne tout simplement pas.

-Je n'y connais rien en optimisation concernant Js mais je pense que ça fait beaucoup de requêtes non? Dès que je met un peu d'img, malgré un poids ne dépassant pas 200ko le scrolling gauche commence à ramer un peu..

-Comment faire pour que ma variable 'a' ne se remette pas à 0 à chaque actualisation, faut-il utiliser de l'AJAX?

Merci d'avance de vos conseils.

salut,

avant de parler d'optimisations, je commencerais par regler les problemes ...
ta balise STYLE est dans le BODY a la place du HEAD ...
botom a la place de bottom

et une enorme :
Code:

1 2 $(function() { window.onload = function() {
ca fait double emploi, c'est soit l'un ou l'autre !

et passe plutot par : $('body').css({left: .....

et faut aussi tester que tu ne vas pas creer plusieurs interval -> je sais pas si le probleme existe avec le mouseenter

pense aussi au float: left

Merci pour ton aide,

J'ai corrigé les détails et pour $(function(){}) étant débutant et ayant commencé à l'utiliser dans cette forme contractée, j'en avais oublié que ça correspondait à jQuery(document).ready(function(){});)
Je n'ai plus de pb sous firefox et IE, merci donc...
Je regardais le reste demain.

j'arrive pas a faire fonctionner le "scrollLeft" sur FF (j'ai pas trop cherché pourquoi) par contre avec "left" ca fonctionne mais dans ce cas ca ne fonctionne plus sur chrome et opera ...

WaW ! C'est de la science fiction totale...8O
Hier soir j'étais sûr de l'avoir testé sur firefox 20 avec un autre pc. Là sur mon PC je teste et ça ne fonctionne pas. Surpris, je regarde le code sur l'autre pc que je re-teste au passage et qui fonctionne sous FF 20, je m'aperçois qu'en fait la différence des 2 codes se trouve tout en haut où sur celui qui fonctionne j'avais laissé par mégarde une balise '< 'avant le <!DOCTYPE> ce qui fait en fait <<!DOCTYPE html>
Et donc écris comme ça ça marche..
Ne trouvez vous pas que c'est un petit peu du délire???8O

Et pour ce qui est du script j'ai simplifié en enlevant le setInterval pour faire comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 $(function() { var droite = $('#droite'), gauche = $('#gauche'); droite.mouseenter(function(){ $('body').animate({ scrollLeft:6000 },2000); }) droite.mouseleave(function(){ $('body:animated').stop(true) }); gauche.mouseenter(function(){ $('body').animate({ scrollLeft:-6000 },2000); }) gauche.mouseleave(function(){ $('body:animated').stop(true) }); });