Предварительная загрузка изображений в Leaflet

1

В моем проекте у меня есть около 50 оверлейных изображений, которые отображаются на карте листов в последовательности, используя слайдер. Чтобы избежать пробелов, я предварительно загружаю изображения в цикле:

imageArray.push(new imageItem(url+val));

Затем, когда мне нужно показать слой overlay, я должен отправить URL-адрес изображения в Листок:

ovl=new L.imageOverlay(get_ImageItemLocation(imageArray[k]), bounds),
ovl.addTo(mymap);

где get_ImageItemLocation():

function get_ImageItemLocation(imageObj) {
  return(imageObj.image_item.src)
}

Мне интересно, правильна ли эта процедура с точки зрения производительности. Не существует способа отправить объект Image в L.imageOverlay вместо URL-адреса? Имею ли я два раза изображение с этим?

Теги:
leaflet
mapbox

3 ответа

3
Лучший ответ

Если ваши изображения кешируются в браузере (в основном это зависит от заголовков, отправленных сервером), вы не загружаете их дважды. Подробнее о кешировании HTTP на MDN. Вкладка "Сеть" в DevTools очень полезна для проверки этого:

Изображение 174551

Если посмотреть на Документы Leaflet и источник imageOverlay, ясно, что для этого требуется только URL, а не фактические данные изображения.

Это не было бы слишком сложно изменить, по сути, просто заменить код в методе setUrl

this._image.src = url;

с чем-то вроде

this._image.src = URL.createObjectURL(blob); // where blob is your image data

Но... я бы не стал беспокоиться об этом. Просто убедитесь, что ваши изображения кэшированы (с правильным max-age установленным в заголовке ответа) в браузере, и все будет хорошо.

1

Не существует способа отправить объект Image в L.imageOverlay вместо URL-адреса?

API обложки изображения не принимает ничего, кроме строки, как в Leaflet 1.2.0.

Имею ли я два раза изображение с этим?

Вы создаете элемент <img> дважды с этим. Я не думаю, что это будет иметь большое влияние на производительность, особенно для только 50 изображений, и каждая пара имеет фактически только одно из изображений, вставленных в DOM.

Мы могли бы утверждать, должен ли Leaflet Image Overlay также принимать узел <img> вместо строки url. Но вы должны понимать, что Leaflet внутренне применяет классы и слушатели к этому элементу <img>, поэтому узел, в который вы проходите, будет изменен.

Это не может быть проблематично для вашего дела, но может быть и для других случаев.

Наконец, я не уверен, что в этом будет большая прибыль.

Фактически, вы даже можете избавиться от своей предзагрузочной ссылки <img> (просто сохраните способ перестроить URL-адрес или сохранить строку URL-адреса в памяти), поскольку единственное, что нужно сделать, чтобы браузер начал получать изображение и иметь его готовый кэш.

1

Другой подход, действительный только в том случае, если оверлеи имеют один и тот же ограничивающий прямоугольник, L.VideoOverlay в том, чтобы поместить 50 изображений вместе в видеофайл и использовать L.VideoOverlay. Затем ваш слайдер должен будет установить время воспроизведения видео, чтобы указать на правильный кадр, вместо переключения изображений.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню