Показать сообщение отдельно
  #1 (permalink)  
Старый 05.04.2011, 06:04
Аспирант
Отправить личное сообщение для _axl Посмотреть профиль Найти все сообщения от _axl
 
Регистрация: 21.07.2009
Сообщений: 39

помогите оптимизировать пожайлуста
Модераторы, если такие, исправьте "автоматизировать" на "оптимизировать" в заголовке, плз

Пишу скрипт, который будет реализовывать следующую навигациюесть большой (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);
	   });

Последний раз редактировалось _axl, 05.04.2011 в 06:52.
Ответить с цитированием