Здравствуйте.
Задался я целью создать карту из игры. Написал скрипт для автокликера и он наделал мне за ночь 30к скриншотов.
Сначала я планировал склеить их в какой-нибудь программе для создания панорам, но все они не давали нужного результата (они соединяют картинки по контрольным точкам, а для моего случая это не самый удачный подход).
В итоге я плюнул на идею с прогами для панорам и написал скрипт, который добавляет изображения на страницу с нужным мне смещением. Вот он:
var coordX = 0,
coordY = 30300,
image = '0000';
for(var i = 0; i < 30400; i++){
image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы отобросить лишние нули
image = image.toString(); // переводим число в строку, чтобы посчитать количество оставшихся символов.
var len = image.length; // считаем количество символов
if (len == 1) {image = '000'+image;}
if (len == 2) {image = '00'+image;}
if (len == 3) {image = '0'+image;}
if (i % 301 == 0){
coordX = 0+600*(i/301);
coordY = 30300-300*(i/301);
}
$('body').append('<img src="screens/Image_'+image+'.jpg" style="left: '+coordX+'px; top: '+coordY+'px;">');
coordX = coordX+200;
coordY = coordY+100;
image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы можно было прибавить единицу
image = image+1; // +1
image = image.toString(); // переводим число в строку, чтобы подготовить к следующему циклу
}
Для перемещения по карте методом перетаскивания я использовал плагин dragscroll.js.
И всё прекрасно, за исключением того, что карта реально огромная. Вес всех файлов составляет чуть более 2Gb. И соответственно загружается это дело достаточно долго.
Подскажите как сделать подгрузку нужных картинок при перемещении по карте. А если вы код подскажите, я буду невероятно счастлив. Просто я чувствую, что моих знаний для реализации этого момента будет недостаточно. Возможно. Скорее всего. )))
Вот эта карта -
http://lss.format23.ru
P.S. И ещё момент. Возможно я использовал не самый оптимальный код для вставки такого большого количества элементов на страницу. Что-то я слышал про предварительное создание элементов перед вставкой в DOM. Но что-то до полного понимания этого механизма я пока не дошёл. Вероятно вы сможете предложить более удачный вариант для этой задачи.