Модераторы, если такие, исправьте "автоматизировать" на "оптимизировать" в заголовке, плз
Пишу скрипт, который будет реализовывать следующую навигациюесть большой (2000 х 1500 пикселей) JPG c картой мира, она выходит за границы экрана, и если пользователь ведет мышкой влево, то экран сдвигается по карте влево, вправо - вправо и т.п. Кроме этого на карте присутствуею блоки с png и текстом.
Chrome показал, что перерисовка после изменения положения карты занимает 11 мс, и таких итераций много, т.к. анимация должна быть плавная. Но плавная как раз не получается - подтупливает, у меня большой монитор 1680 пикселей в ширину, на меньших должен тупить меньше, т.к. браузер перерисовывает только видимую область, но еще нужно учитывать пользователей с слабыми процессорами.
Вот код, посоветуйте, что можно оптимизировать для увеличения скорости выполнения? Сам я уже выжал из него все что мог.
this.bind('mousemove', $(this), function (event) {
var obj = $(this);
var relative = {x: event.pageX,
y: event.pageY};
change = {x: 0,
y: 0};
for (var z in relative){ // расчет на сколько сдвигаются координаты,
if (relative[z] < settings.area)
change[z] = Math.round( (relative[z] - settings.area)*settings.velocity);
else if (relative[z] > (size[z]-settings.area))
change[z] = Math.round( (settings.area+relative[z]-size[z])*settings.velocity );
}
clearTimeout(timeoutID);
timeoutID = setTimeout( function(){ // timeout чтобы скрипт не реагировал на мелкие дерганья мышкой
if( !change.x && !change.y ) return false;
clearInterval(intervalID);
intervalID = setInterval(Move, 20, [$(this)]);
}, 10);
});
function Move(obj) {
position.x -= change.x; // новые координаты
position.y -= change.y;
if( position.x > 0 ){ // не дает выйти за границы экрана
position.x = 0;
}
else if( position.x < maxx ){ // не дает выйти за границы экрана
position.x = maxx;
}
o.css("left", position.x+'px');
if( position.y > 0 ){ // не дает выйти за границы экрана
position.y = 0;
}
else if( position.y < maxy ){ // не дает выйти за границы экрана
position.y = maxy;
}
o.css("top", position.y+'px');
};
function stopAnimation(){
clearTimeout(timeoutID);
clearInterval(intervalID);
}
this.bind('mouseleave', $(this), function (event) {
clearInterval(intervalID);
});
