оптимизация drag and drop
 

мучаюсь все с тем же проектом и осталось 2 проблемы, и одна из них drag and drop проблема в том что при max зуме начинает притормаживать перемещение в хроме, пытался сделать такую обертку

function MoveWrapper() {

var timeout = true;	
	
return function (e) {
	
 if(!timeout || !move) return;
 
  timeout = false;
  
 setTimeout(function () {
	 
 MouseMove(e) 	 
  timeout = true;	 
	 
	 },20);
	 
}	  
	  }

но особо не помогло.
вторым вариантом оптимизации было разрезать картинку на блоки, что в общем сработало но оказалось собрать ее в одну картинку с размером меньше оригинала достаточно тяжело..
есть ли какие то предложение , советы по оптимизации?
тестовая страница http://cyberua.16mb.com/files/zoom.html

cyber,
Для оптимизации стоит не менее 100 брать (12 это реально минимальный отрабатываемый интервал

строка 16	     },120);

хм, попробую но раньше стояло 70 и все равно были фризы

когда ставиш 100 возникает ощущение что установлена анимация

-webkit-transition: all 1s ease;

ну ты понимаеш о чем я=)

оптимально 40, но большого эфекта не дает

неужели не у кого нет идей по оптимизации?
ну или подскажите как сделать :
есть картинка к примеру 1920 x 1200 , она разрезается на блоки (не все блоки равные)
кусок кода

<div id="IMG-map">
<div class="wrapper_parts">
<img src="delete/0.png">
</div>
<div class="wrapper_parts">
<img src="delete/1.png">
</div>
<div class="wrapper_parts">
<img src="delete/2.png">
</div>
</div>

но вот в чем проблема в блоке у нее должен быть размер 1600 х 1000 и по этому она вылазит за пределы блока, есть идеи как ее можно сжать на css?

А не кажется ли вам, что на все масштабы надо делать свои картинки?
По сабжу посмотрел на хроме на максимальном масштабе, всё вроде нормально работает, а вот в лисе от края картинки остаются полосы.

я то думал об этом но смысел, при масштабе к примеру
1280х900 картинка в таком же разрешение
при 1400 х1000 картинка в таком же разрешение
при 1920х1200 картинка в таком же разрешение и хоп тут опять тормоза

какая разница тогда уже проще увеличивать одну картинку

cyber,
Тут нужна такая фича - при зажатой мыши - подсовываем и перемещаем достаточно неважную по качеству картинку - как мышь отпускаем - втыкаем картинку с нормальным разрешением - байтовый размер "Плохой" картинки в 700КB - уберет все тормоза

Т.е задача облегчить картинку с приемлимым видом до 700 -760КB для перемещений (оптимально тут фильт "Aппликaция" c 20-32 градациями - т.е)

( *в принципе - хороший Фотошопист может ужать дополнительно и основную, существующую картинку, без потери качества - до 1400КB - но для таких размеров картинки под ФШ оптимизацию нужен комп с памятью в 4 гига минимум

я не совсем понял, т.е нужно взять текущую картинку сжать ее и двигать а потом перемещать нормальную? если да то не вариант, картинок слишком много что бы повторять такие операции, больше 100

cyber,
Нет -
У тьву две картинки - плохая и хорошая
Текущая 1.9мега,
Воть нун сделать поплоше - такого же размера ,но с меньшей четкостью
дабы её начальный объем был 700 -780КБ
(есть сервисы в инете) или закомый фотошопер (у мну памяти не зватат - пытался помочь)

Когда перемещаешь - перемещаешь плохую - брауз тратит менее энергии на рендинг такой картинки - двигать 2 мега или 700кил, как остановился ( более чем на о.3-.4сек подсовываешь качественную

я не пойму просто как будет двигатся карта под картинкой, я так понял нужно сделать что бы они синхронно двигались?

cyber,
нет ты хорошую карту изымыешь (меняешь ссылку) на плохую

самое странное что если картинку не увеличивать а сразу поставить в макс размер то при перемещение тормозов нет :blink:

на странице сразу подгружены три картинки
Одна в самой карте(изначально "хорошая"
(И Две скрыты z-index:200) это хорошая и "плохая"
- это фишка чтобы картинки не переподгружать

Ну дык вставь сперва уменьшенную дождись подгрузки большой и замени

Отображать (рендерить) надо через window.requestAnimationFrame
Вместо style.left и style.top надо использовать style.transform = translate(x,y);

да да да=)
я 2 дня не мог понять почему гугл и другие подобные скрипты юзают translate=)
кстати а подругому можно получит текущие значение translate

var translate = wrapper[0].style.WebkitTransform.match(/(-[0-9]|[0-9])+/ig);

не могу найти инфу как это делается=(

угу, зачем нужен window.requestAnimationFrame , я понял написав по быстро простенькую анимацию
http://learn.javascript.ru/play/tlW2j

<!DOCTYPE HTML>
<html>
  <head> 
  
    <style>
      *{margin:0;}
      
      .square {
        width:50px;
        height:50px;
        position:absolute;
        background-color:black;
      
      }
    
    </style>
    
   <script>
     
    if ( !window.requestAnimationFrame ) {

  window.requestAnimationFrame = ( function() {
    return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

      window.setTimeout( callback, 1000 / 60 );

    };

  })();
} 
    </script> 
  </head>
  <body>
    <div class='square'></div>
    <div style='top:70px;'  class='square'></div>
    
    <script>
  
    var elem = document.getElementsByClassName('square');
     
     
   function app (elem,fnc) {
      
      var i = 0;
      var back = false; 
     
     (function animate () {
      elem.style.left= i+'px';
       
       if (i >= 500 || back) {
         
         back = true;
         
         i--;
       }
     
       if (!back || i == 0)  {
      
       back = false;
       i++;
       } 
      
       fnc(animate);
     }());
      
      }

app (elem[0], window.requestAnimationFrame);
app(elem[1],function ( callback,  element ) {

      window.setTimeout( callback, 1000 / 60 );

    })     
    </script>

  </body>
</html>

вопрос в другом как это поможет в моем случае?

положение элемента будет меняться прямо перед отрисовкой. большая плавность будет. и ещё не надо заботиться о промежутке времени между вызовами отрисовки при движении мыши.

т.е вместо моей обертки использовать window.requestAnimationFrame ?

я имел в виду другое.

но, да, вместо обёртки использовать оригинал, где возможно.

сделал так

function MoveWrapper() {

var timeout = true;	
	
return function (e) {
	
 if(!timeout || !move) return;
 
  timeout = false;
  
 window.webkitRequestAnimationFrame(function () {//пока только для хрома
	 
  MouseMove(e) 	 
  timeout = true;	 
	 
	 });
	 
}	  
	}

а ты как имел ввиду?

похоже, мы о разных вещах говорили :)

а как ты рендеришь изменения?

не совсем понимаю значение фразы "рендерить изменение " в данном контексте.
Я под Рендерингом понимаю : отрисовку изоображение.
Т.е как я отображаю изменения визуально? если да то я просто перемещаю.
Сор что туплю, но реально не совсем понимаю =(

можно хоть анимацией перемещать.

лучше всего, мне кажется, через translate.

но никак не через style.left.

да я уже переделал давненько=)

wrapper.css({
	WebkitTransform :'translate('+left+'px,'+top+'px)'//пока для хрома так как пишу в нем=)
	});

кстати не кто не подскажит с какой версии хром поддерживает translate?

нашел=)
https://developer.mozilla.org/en-US/...-moz-transform
чет не подумал там глянуть=)

на будущее, лучше всего смотреть на caniuse.com

смотрю тут обычно http://www.browsersupport.net/
просто решил проверить в других источниках на всякий пожарный:)

еще один вопрос почему этот код работает не только в хроме правильно а и во всех остальных браузерах :blink:

wrapper[0].style.WebkitTransform.match(/(-[0-9]|[0-9])+/ig);

и есть ли способы по проще получить значение Transform?

и как проверить поддержку события TransitionEnd брауезром задается через addEventListener

не могу весь день найти ответы на эти вопросы=(

меня игнорируют:-E

cyber,
:blink: Дык melky - нет - я не в курсе, посколь не пользовалси
http://learn.javascript.ru/css-anima...-transitionend
http://qps.ru/ZyOhW
http://qps.ru/ZyOhW

сор,просто ни кто не знает какого фига оно работает
http://learn.javascript.ru/play/9M2sNb

cyber,
:-E Есть фенька http://htmlbook.ru/css/background-size
Её прикол в том - что при передвижении фоновой картинки методом background-position , - изо не перерендиваецо -а пиксельно смещаецо - скорость возрастает многократно

все ответ получен, кому интересно вот в чем прикол был

и снова гемор проблемы с оптимизацией, только уже с зумом
проблема в том что если сразу после зума начать двигать элемент пару секунд жестокие тормоза, а потом все ок
пробывал сделать плавный зум, но не помогло

function smoothZoom() {
var zoom = scale - options.scaleStep;
var step = options.scaleStep / 15;

(function animate () {	

zoom += step;

if (zoom > scale){
	CallBackZoom.call(zooming, wrapper);
	return;
	}
	
zooming.css({
  WebkitTransform :'scale('+zoom+')',
  MozTransform : 'scale('+zoom+')',
  OTransform : 'scale('+zoom+')',
  msTransform : 'scale('+zoom+')'
  });
  
 window.requestAnimationFrame(animate) ;
}());

}