Как сделать что б не подтормаживало.
Есть скрипт, выбирается 11 картинок - шариков и для каждого запускается функция moving - в нее передаются параметры сам шарик, переменная с - первый цикл движения или нет, координаты 5 точек и последняя переменная - находится шарик на краю экрана или в середине. Каждый шарик движется по своей траектории отлетает от стенок, как только шарик прошел свой путь 4 или 5 отлетов, запускается рекурсивная функция в последней анимации и процес повторяется.
Проблема в том что эта анимация тормозит, особенно в ие6-8, да и вобще везде. Не знаю как ускорить, мне б идею какую-нибудь, в чем причина тормозов и как это можно лучше сделать.
$(window).load(function(){
var circle1=$('#page1_circle1');
var circle2=$('#page1_circle2');
var circle3=$('#page1_circle3');
var circle4=$('#page1_circle4');
var circle5=$('#page1_circle5');
var circle6=$('#page1_circle6');
var circle7=$('#page1_circle7');
var circle8=$('#page1_circle8');
var circle9=$('#page1_circle9');
var circle10=$('#page1_circle10');
var circle11=$('#page1_circle11');
moving1(circle1,1,0,48,15,100,100,65,35,0,0,0,true);
moving1(circle2,1,0,61,35,100,100,10,85,0,0,0,true);
moving1(circle3,1,19,51,0,20,15,0,100,30,80,100,false);
moving1(circle4,1,40,39,0,40,65,0,100,60,20,100,false);
moving1(circle5,1,51,46,100,34,85,0,0,5,45,100,false);
moving1(circle6,1,56,13,33,100,0,50,68,0,100,35,false);
moving1(circle7,1,72,22,100,15,76,0,0,40,35,100,false);
moving1(circle8,1,86,18,100,18,0,18,18,0,60,100,false);
moving1(circle9,1,82,18,50,100,40,0,0,25,80,0,false);
moving1(circle10,1,86,12,45,100,35,0,0,20,75,0,false);
moving1(circle11,1,84,9,40,100,30,0,0,15,70,0,false);
})
// движение шарика.
function moving1(circle,c,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end) {
var speed_general=3/100;
var all_w=$('body').width();
var all_h=$('body').height();
if (x1==100) {x1 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
if (y1==100) {y1 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
if (x2==100) {x2 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
if (y2==100) {y2 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
if (x3==100) {x3 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
if (y3==100) {y3 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
if (x4==100) {x4 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
if (y4==100) {y4 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
if (x5==100) {x5 = Math.floor((Math.floor(all_w-circle.width()))/all_w*100)}
if (y5==100) {y5 = Math.floor((Math.floor(all_h-circle.height()))/all_h*100)}
var length=getLineLength(x1,y1,x2,y2);
var length2=getLineLength(x2,y2,x3,y3);
var length3=getLineLength(x3,y3,x4,y4);
var length4=getLineLength(x4,y4,x1,y1);
if (!at_end) {
var length5=getLineLength(x4,y4,x5,y5);
var length6=getLineLength(x5,y5,x2,y2);
var speed5=Math.floor(length5/speed_general);
var speed6=Math.floor(length6/speed_general);
}
var speed=Math.floor(length/speed_general);
var speed2=Math.floor(length2/speed_general);
var speed3=Math.floor(length3/speed_general);
var speed4=Math.floor(length4/speed_general);
switch (c) {
case 1:
circle.animate({top:y2+'%',left:x2+'%'},speed,'linear');
circle.animate({top:y3+'%',left:x3+'%'},speed2,'linear');
circle.animate({top:y4+'%',left:x4+'%'},speed3,'linear');
if (!at_end) {
circle.animate({top:y5+'%',left:x5+'%'},speed5,'linear');
circle.animate({top:y2+'%',left:x2+'%'},speed6,'linear',function(){moving1(circle,0,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end)})
}
else {
circle.animate({top:y1+'%',left:x1+'%'},speed4,'linear');
circle.animate({top:y2+'%',left:x2+'%'},speed,'linear',function(){moving1(circle,0,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end)})
}
break;
case 0:
circle.animate({top:y3+'%',left:x3+'%'},speed2,'linear');
circle.animate({top:y4+'%',left:x4+'%'},speed3,'linear');
if (!at_end) {
circle.animate({top:y5+'%',left:x5+'%'},speed5,'linear');
circle.animate({top:y2+'%',left:x2+'%'},speed6,'linear',function(){moving1(circle,0,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end)});
}
else {
circle.animate({top:y1+'%',left:x1+'%'},speed4,'linear');
circle.animate({top:y2+'%',left:x2+'%'},speed,'linear',function(){moving1(circle,0,x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,at_end)});
}
break;
}
}
// длина линии.
function getLineLength (x1,y1,x2,y2) {
var x12=x2-x1;
var y12=y2-y1;
var lentgth_not_ready=Math.sqrt(Math.pow(x12, 2) + Math.pow(y12, 2));
return lentgth_not_ready;
}
|
var width = $().width();
setInterval(function () {
$(node).animate({
marginLeft: width
},
1000).animate({
marginLeft: 0
},
1000);
});
|
Вы дергаете браузер почем зря. Для того, чтобы отработал jQuer'евский
.width() или .height(), нужно обратиться к DOM, тот вызовет reflow, после этого вернет значение.Сравните:
var was = new Date();
var jDB = $(document.body);
for(var i=0; i<1000; i++){
jDB.width(); // здесь мы вызываем функцию замера
}
var now = new Date();
alert(now.getTime() - was.getTime() + " мс")
var was = new Date();
var jDB = $(document.body);
for(var i=0; i<1000; i++){
jDB.foo; // а тут читаем гипотетическую переменную foo
}
var now = new Date();
alert(now.getTime() - was.getTime() + " мс")
Кешируйте значения! Если размер объекта не меняется, незачем мерять его 40 раз в секунду. Если размер окна изменится, Вы узнаете об этм через событие resize. |
ок,спасибо. Буду пробовать.
|
| Часовой пояс GMT +3, время: 05:10. |