Приветствую.
В общем, вчера ночью я всё таки победил (как мне кажется) эту "ленивую загрузку". Результат тут -
http://lss.format23.ru/
Но всё равно мне кажется, что мой код не оптимален, и можно сделать ещё быстрее. Тут теперь не столько ждёшь загрузок изображений, сколько ожидаешь расчётов, производимых браузером. Так например, для определения области видимости, скрипт постоянно прогоняем весь список файлов, чтобы понять, что видно, а что нет.
Вот код:
$(document).ready(function() {
// код добавления изображений
var coordX = 0, // устанавливаем позицию для первого скрина (отступ слева)
coordY = 30300, // отступ сверху
image = '0000', // имя первого изображения
gamecorX = 0, // переменные для добавления к изображениям игровых координат (в атрибут title)
gamecorY = 1212,
map = $('<div/>'); // создаём div для добавления в него всех элементов
map.addClass('map'); // добавляем ему класс, чтобы он не был безымянным
// запускаем цикл для перебора всех изображений
for(var i = 0; i < 30400; i++){
// так как имена файлов у нас в формате Image_0000 придётся заморочиться с ними
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;}
// реализуем переход на следующий ряд (в одном ряду должно быть 301 изображение)
if (i % 301 == 0){
coordX = 0+600*(i/301);
coordY = 30300-300*(i/301);
gamecorY = gamecorY-12;
gamecorX = 0;
}
// добавляем изображение в div.map
map.append('<img data-src="screens/Image_'+image+'.jpg" style="left: '+coordX+'px; top: '+coordY+'px;" alt="Please wait. I\'m will load soon. ;)" title="'+gamecorX+' : '+gamecorY+'">');
coordX = coordX+200; // задаём смещение по оси Х
coordY = coordY+100; // по оси Y
gamecorX = gamecorX+4; // изменяем игровые координаты для title
// снова заморачиваемся с именем файла
image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы можно было прибавить единицу
image = image+1; // +1
image = image.toString(); // переводим число в строку, чтобы подготовить к следующему циклу
}
$('body').append(map); // добавляем наш блок с картинками в body
});
// определяем область видимости
$(document).scroll(function() {
function inWindow(s){
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var currentEls = $(s);
var result = [];
currentEls.each(function(){
var el = $(this);
var offset = el.offset();
if (scrollTop-1000 <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight+1000) && scrollLeft-1000 <= offset.left && (el.width() + offset.left) < (scrollLeft + windowWidth+1000)) result.push(this);
});
return $(result);
}
var boxesInWindow = inWindow("img");
// меняем атрибут data-src у всех видимых изображений
var imgEl = boxesInWindow;
for (var i=0; i<imgEl.length; i++) {
if(imgEl[i].getAttribute('data-src')) {
imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
imgEl[i].removeAttribute('data-src');
}
}
});
Если его можно как-то оптимизировать, чтобы он работал быстрее, было бы просто здорово.
А ещё я подумал, что наверное имело бы смысл менять атрибут "src=" на "data-src=" у всех элементов которые сейчас не видны, чтобы не хранить в памяти все загруженные картинки. Но я боюсь, что вычисления всех "невидимых" объектов будут занимать ещё больше времени чем расчёты видимых, что будет ещё сильнее тормозить страницу. Хотя скорее всего можно дописать эту штуку к уже существующему скрипту, но я пока не понял как. И вообще я не очень уверен в результате этих действий. Т.е. будет ли легче браузеру, если выгружать из памяти уже загруженные, но не видимые сейчас картинки?
В общем, я буду признателен любым советам по оптимизации. И было бы круто с примерами )) Потому что тут я уже выше своей головы прыгнул )))
P.S. И ещё момент. После добавления этого скрипта "ленивой загрузки" страница перестала открываться на мобильных устройствах. Раньше можно было дождаться загрузки и вполне себе просматривать карту. А сейчас она почему-то совсем не отображается. Я думаю, проблема где-то в этом скрипте для определения области видимости. Но не уверен.
