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

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)

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>

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

<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>

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

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

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

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

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

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

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

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

Цитата:

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

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

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

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

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

Цитата:

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

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

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

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

Цитата:

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

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