Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.05.2010, 13:57
Новичок на форуме
Отправить личное сообщение для Сергей Постовит Посмотреть профиль Найти все сообщения от Сергей Постовит
 
Регистрация: 24.04.2010
Сообщений: 2

Как сделать что б не подтормаживало.
Есть скрипт, выбирается 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;
}
Ответить с цитированием
  #2 (permalink)  
Старый 11.05.2010, 14:14
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

var width = $().width();
setInterval(function () {
	$(node).animate({
		marginLeft: width
	},
	1000).animate({
		marginLeft: 0
	},
	1000);
});
Ответить с цитированием
  #3 (permalink)  
Старый 13.05.2010, 00:57
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Вы дергаете браузер почем зря. Для того, чтобы отработал 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.
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2010, 12:07
Новичок на форуме
Отправить личное сообщение для Сергей Постовит Посмотреть профиль Найти все сообщения от Сергей Постовит
 
Регистрация: 24.04.2010
Сообщений: 2

ок,спасибо. Буду пробовать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать fullscreen -=1100=- Общие вопросы Javascript 8 30.07.2012 09:53
Как сделать вкладку с 'плюсами и минусами'??? Monopolist Элементы интерфейса 2 05.08.2009 14:07
Как сделать смену картинки, типа "до" и "после", без перезагрузки страницы? btstudio Events/DOM/Window 2 23.02.2009 20:43
Как сделать справочное окно? Vlaimir Events/DOM/Window 13 05.01.2009 14:06
Скроллбар, как сделать свой? Destrifer Элементы интерфейса 2 01.12.2008 23:48