Javascript-форум - оптимизация drag and drop

Страница 2 из 6

Последняя »

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - оптимизация drag and drop (https://javascript.ru/forum/events/31024-optimizaciya-drag-drop.html)

cyber

26.08.2012 21:09

Цитата:

Сообщение от Deff (Сообщение 200518)

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

у меня drag and drop превратился в слайд шоу:victory:

melky

26.08.2012 21:11

cyber зум пробуй делать через анимацию... даже не через переходы, а именно анимацию... по моим наблюдениям, производительность анимации выше произв. transition.

хотя я и могу ошибаться.

Deff	26.08.2012 21:15

melky,
я так понял, тормоз не при zoom, при перемещениях = перемещения бекграунда занчительно быстрее

cyber

26.08.2012 21:20

Цитата:

Сообщение от melky (Сообщение 200665)

ну уже пробывал, не помогает

-webkit-transition: all .5s ease;	
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;

cyber

26.08.2012 21:21

Цитата:

Сообщение от Deff (Сообщение 200668)

melky,
я так понял, тормоз не при zoom, при перемещениях = перемещения бекграунда занчительно быстрее

я там намудрил щас попробую под бэк

melky

26.08.2012 21:31

Цитата:

Сообщение от cyber

ну уже пробывал, не помогает

я же выделил слово анимация, и написал рядом переходы - transition.

кстати, можно пример на jsbin с жутко тормозящей картинкой? у меня даже восьмимегабайтная картинка не тормозит :(

cyber

26.08.2012 21:44

а так не прокатит?=)
http://cyberua.16mb.com/files/
только подожди пока картинка загрузится, а то еще не ставил на нее onload

cyber

26.08.2012 21:50

Тормозит только в хроме, забыл добавить, если двигать после зума(зум колесиком)=)

cyber

26.08.2012 22:28

Deff, попробывал с background и перемещать через background-position , у меня просто тормоза получились а тормоза в квадрате

cyber

26.08.2012 22:41

не фига не пойму почему полсе зума тормозит, даже если нет трогать сразу после зума сек 10 а потом понятнуть пару секунд тормозит..
(все выше указанное замеченно было только в хроме с большими картинками)
css3 transition не помогает и window.requestAnimationFrame тоже не помогает

Deff	26.08.2012 23:11

Цитата:

Сообщение от cyber

Deff, попробывал с background и перемещать через background-position , у меня просто тормоза получились а тормоза в квадрате

Гы, если перемещать через background-position, то zoom нужно делать через background-size: иначе смысла в этом нет

cyber

26.08.2012 23:17

Deff,я вообще не увеличивал=)
оно так тормозило что пипец

Deff	26.08.2012 23:18

cyber,
Хм... А брауз какой ?

А ежели div перемещать с данным background = тормоза - те же ? (Поскольку точно помню что выиграл два - три раза при установке в background

cyber

26.08.2012 23:23

Цитата:

Сообщение от Deff (Сообщение 200701)

тормоза только в хроме, поэтому в нем и тестирую, в нем не то что background тормозил двинуть нормально было почти не риально

Deff	26.08.2012 23:54

cyber,

А Попробуй в своих Вариантах сменить тип картинки (мну думает что Хром с jpg туго работает
Воть трансформировал в png http://sendfile.su/657017

cyber

27.08.2012 00:14

Deff,
не, двсе равно так же после зума пока не сместиш на определенное расстояние тупит и не хилая картинка 28 метров=)

Deff	27.08.2012 00:17

Цитата:

Сообщение от cyber

и не хилая картинка 28 метров=)

cyber,
:write: В bmp 145MБ

cyber

27.08.2012 00:19

Цитата:

Сообщение от Deff (Сообщение 200725)

cyber,
:write: В bmp 145MБ

эта картинка полностью передает выражение моего лица

cyber

27.08.2012 00:23

у меня уже идеи по оптимизации заканчиваются=(

Deff	27.08.2012 00:29

cyber,
Если её порезать на 4 части - то мон существенно и улчушить картинку и наверно ускорить

Попробуй - с четвертинкой - если удачно - то завтра разрежу

http://s1.uploads.ru/i/lDANn.png

cyber

27.08.2012 00:38

не уже пройденный этап, их фиг потом соединишь, так что бы можно было уменьшить размер.
эм... а что с картинкой сделал меньше подтормаживает :blink:
а по резать можно с помощью пхп , вот код

<?php ini_set('memory_limit','264M'); // 128М как по умолчанию - не хватает! я про это говорил
$path='t110e5_ru_1920_1200.jpg'; // Путь до файла 
$name=substr(basename($path), 0, -4); 
$src = imagecreatefromjpeg($path); 
$temp_array=array(); 
$step=200; // Размеры квадратов 
$width=imagesx($src);  // догадаешься что это?)
$height=imagesy($src); // а это?)


for ($i=0;$i<$width;$i=$i+$step){ 
 for ($j=0;$j<$height;$j=$j+$step){ 
  $w = $i+$step<$width ? $step : $width-$i; 
  $h = $j+$step<$height ? $step : $height-$j; 
  $dest = imagecreatetruecolor($w, $h); //создаем новое изображение
  imagecopy($dest, $src, 0, 0, $i ,$j, $step, $step); //тырим со старого на новое
   imagejpeg($dest,'delete/'. $name.'_'.$i.'_'.$j.'.jpeg');  
  $temp_array[$j][$i]='delete/'.$name.'_'.$i.'_'.$j.'.jpeg'; 
 } 
}  //стираем старую херню)
 imagedestroy($dest); 
 imagedestroy($src); 
 //рисуем пикчёрззз
  echo "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">"; 
foreach ($temp_array as $value){ 
echo "<tr>"; 
 foreach ($value as $v){ 
  echo "<td><img src=\"".$v."\"><td>\n"; 
 } 
echo "<tr>"; 
} 
echo "<table>"; 
?>

просто я пробывал разрезать, помогло , но собрать картинку тяжело потом

Deff	27.08.2012 00:44

Цитата:

Сообщение от cyber

просто я пробывал разрезать, помогло , но собрать картинку тяжело потом

я соберу
Через таблу с border-collapse:collapse и border: 0 none transparent;

cyber

27.08.2012 00:49

а не не нужно в таблицу, это просто я в скрипте забыл поменять=)

<?php ini_set('memory_limit','264M'); // 128М как по умолчанию - не хватает! я про это говорил
$path='t110e5_ru_1920_1200.jpg'; // Путь до файла 
$name=substr(basename($path), 0, -4); 
$src = imagecreatefromjpeg($path); 
$temp_array=array(); 
$step=200; // Размеры квадратов 
$width=imagesx($src);  // догадаешься что это?)
$height=imagesy($src); // а это?)

$imgName = 0;
for ($i=0;$i<$width;$i=$i+$step){ 
 for ($j=0;$j<$height;$j=$j+$step){ 
  $w = $i+$step<$width ? $step : $width-$i; 
  $h = $j+$step<$height ? $step : $height-$j; 
  $dest = imagecreatetruecolor($w, $h); //создаем новое изображение
  imagecopy($dest, $src, 0, 0, $i ,$j, $step, $step); //тырим со старого на новое
   imagejpeg($dest,'delete/'. $imgName.'.jpeg');  
  $temp_array[$j][$i]='delete/'. $imgName.'.jpeg'; 
  $imgName++;
 } 
}  //стираем старую херню)
 imagedestroy($dest); 
 imagedestroy($src); 
 //рисуем пикчёрззз
foreach ($temp_array as $value){ 

 foreach ($value as $v){ 
  echo "<div><img src=\"".$v."\"><div>"; 
 } 

} 

?>

cyber

27.08.2012 00:57

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

cyber

27.08.2012 01:09

кстати если картинку сделать в png все равно тормозит , но меньши

Deff	27.08.2012 11:26

cyber,
Воть распилил - три варианта http://sendfile.su/657136

cyber

27.08.2012 16:02

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

Deff	27.08.2012 16:07

Цитата:

Сообщение от cyber

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

я те порезал на идентичные
И ежели вставить в таблу и менять размер таблы (width=10%,width=20% ) то мон наверно забыть об ячейках
в ячейках сделать <img width=100%

cyber

27.08.2012 16:36

и вот что получается

вот код

<style>
*{margin:0;padding:0;}
table{
	width:1600px;
	height:1000px;
	}
table td > img{
	width:100%;
	height:100%;
}
</style>
<title>Документ без названия</title>
</head>

<body>
<div id='ImgParts'></div>

<script type="text/javascript">
(function () {
var table = '<table><tr>'

for (var i = 1;i < 25; i++) {
	table += '<td ><img src="output/6Х4/general_'+i+'.png"></td>'
	
	}

table += '</tr></table>';
$('#ImgParts')[0].innerHTML = table;
}());

</script>
</body>
</html>

и если сделать , к примеру так

table {
	
	width:1600px;
	height:1000px;
	}
table td{
	width:50%;
	height:50%;
	}
table td > img{
	width:100%;
	height:100%;
}

тоже самое

Deff	27.08.2012 16:50

cyber,
Для картинок так:
<img style="width:100%;height:auto" />

А это

table td{
07	    width:50%;
08	    height:50%;

нафег ? (Имхо - лишнее

cyber

27.08.2012 17:10

Deff,

<style>
*{margin:0;padding:0;}
table {
	
	width:100%;
	height:100%;
	}

#ImgParts {
	width:1600px;
	height:1000px;
	}
</style>
<title>Документ без названия</title>
</head>

<body>
<div id='ImgParts'></div>

<script type="text/javascript">
(function () {
var table = '<table cellpadding="0" cellspacing="0"><tr>'
var j = 0;
for (var i = 1;i < 25; i++) {
	
	 if (j == 6) {
		table +='<tr></tr>';
		j = 0; 
		 }
	table += '<td ><img style="width:100%;height:auto" src="output/6Х4/general_'+i+'.png"></td>'
	
	j++;
	}

table += '</tr></table>';
$('#ImgParts')[0].innerHTML = table;
}());

</script>

cyber

27.08.2012 17:30

помогло разбить картинки по разрешением
к примеру:
при зуме до х2 , одна картинка.
до х4 другая картинка , и т.д
Но сама идея мне не нравится, надеюсь получится с разрезанием..
П.с помогло не на столько сильно как бы хотелось=(

Deff	27.08.2012 17:54

<body style="width:100%">

<style type="text/css">
#wrapper {
 width:700px;
 height:300px;
 overflow:auto;
 border: 2px solid red;
}
#Wtable {
  width:120%;
  border-collapse:collapse;
  border:collapse;
}
#Wtable,
#Wtable td,
#Wtable td img{
  padding:0; margin:0;
  border: 0 none transparent;
}
#Wtable td {
 width:16.7%;
}
</style>
<center>
<div id=wrapper>

<table id=Wtable cols=6><tbody>
<tr>
  <td>
<img src="http://s1.uploads.ru/i/TZd4e.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/SEq9o.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/ochxX.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/hcBbj.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/u2jak.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/y13xd.jpg" style="width:100%;height:auto" />
  </td>
</tr>

<tr>
  <td>
<img src="http://s1.uploads.ru/i/SKmCG.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/Ikgms.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/57xoZ.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/b7FNY.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/dkQSx.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/NU1Yz.jpg" style="width:100%;height:auto" />
  </td>
</tr>


<tr>
  <td>
<img src="http://s1.uploads.ru/i/e3nVk.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/lqhWv.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/UXTZ7.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/FKMhl.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/vbRtF.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/eVzGS.jpg" style="width:100%;height:auto" />
  </td>
</tr>


<tr>
  <td>
<img src="http://s1.uploads.ru/i/nyXmT.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/Vdn2M.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/xERsl.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/OlNVq.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/8IorE.jpg" style="width:100%;height:auto" />
  </td>
  <td>
<img src="http://s1.uploads.ru/i/7muar.jpg" style="width:100%;height:auto" />
  </td>
</tr>
</tbody></table


</div></center>


</body>

Deff	27.08.2012 18:15

cyber,
Какой у тебя размер окна просмотра (которое с overflow) ?

cyber

28.08.2012 00:10

Deff, в данный момент

.map{
	width:1500px;
	height:900px;
	overflow:hidden;
	margin:10px;
	border:1px solid black;
	
	}

но я постоянно меняю что бы видить как работает при разных размерах

cyber

28.08.2012 00:13

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

Deff	28.08.2012 00:17

cyber,
Карочь есть индея...
1. Для больших изо - когда в окне умещаецо не более одного полного куска, в полный размер, при таком условии максимальное их колво 4, - согласен ?
(четыре - т.е когда они перекрестьем стыков ближе к центру окна просмотра)
-определяем число видимых в данный момент кусков по 4 крайним точкам прямоугольника окна просмотра
- если нужон метод - покажу( остальные картинки гасим с помощью visibilitty:hiden (если hidden не поможет - заменим на прозрачку)

Так что пробуй с перемещением таблы на 4 ячейки соседних ячейки (две сверху - две снизу) в полный размер(не ужатую)
Если с такой таблой - тормоза терпимые - завтра мон реализовать идею ниже....

При варианте ежели в окно влезает более одного полного куска - есть другая идея(эт уже завтра)

cyber

28.08.2012 00:41

Цитата:

Сообщение от Deff (Сообщение 201006)

cyber,
Карочь есть индея...
1. Для больших изо - когда в окне умещаецо не более одного полного куска, максимальное их колво 4 - согласен ?
(т.е когда они перекрестьем стыков ближе к центру окна просмотра)
-определяем число видимых в данный момент кусков по 4 крайним точкам прямоугольника
- если нужон метод - покажу( остальные гасим с помощью visibilitty:hiden (если hidden не поможет - заменим на прозрачку)

Так что пробуй с перемещением таблы на 4 ячейки соседних ячейки (две сверху - две снизу) в полный размер

При варианте ежели в окно влезает более одного полного куска - есть другая идея(эт уже завтра)

у меня была такая идея, и алгоритм придумал, но это вариант на черный случай(, так как не только с drag and drop нужно синхронизировать но и zoom.
Просто реально лень его реализовывать:)
П.с не понятно почему drag and drop выдает мего тормоза если поставить таблицу http://cyberua.16mb.com/files/ , в хроме вообще опа

Deff	28.08.2012 01:07

Цитата:

Сообщение от cyber

Просто реально лень его реализовывать

а чо там реализовывать - проверить 4 крайних точки окна просмотра в какие ячейки таблы попадают - остальные картинки завизиблить hidden

Вот метода - проверки => http://javascript.ru/forum/offtopic/...tml#post189280

cyber

28.08.2012 01:13

Цитата:

Сообщение от Deff (Сообщение 201016)

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

Часовой пояс GMT +3, время: 14:09.

Страница 2 из 6

Последняя »

Показывать 40 сообщений этой темы на одной странице