В моем проекте у меня есть около 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-адреса? Имею ли я два раза изображение с этим?
Если ваши изображения кешируются в браузере (в основном это зависит от заголовков, отправленных сервером), вы не загружаете их дважды. Подробнее о кешировании HTTP на MDN. Вкладка "Сеть" в DevTools очень полезна для проверки этого:
Если посмотреть на Документы Leaflet и источник imageOverlay
, ясно, что для этого требуется только URL, а не фактические данные изображения.
Это не было бы слишком сложно изменить, по сути, просто заменить код в методе setUrl
this._image.src = url;
с чем-то вроде
this._image.src = URL.createObjectURL(blob); // where blob is your image data
Но... я бы не стал беспокоиться об этом. Просто убедитесь, что ваши изображения кэшированы (с правильным max-age
установленным в заголовке ответа) в браузере, и все будет хорошо.
Не существует способа отправить объект Image в L.imageOverlay вместо URL-адреса?
API обложки изображения не принимает ничего, кроме строки, как в Leaflet 1.2.0.
Имею ли я два раза изображение с этим?
Вы создаете элемент <img>
дважды с этим. Я не думаю, что это будет иметь большое влияние на производительность, особенно для только 50 изображений, и каждая пара имеет фактически только одно из изображений, вставленных в DOM.
Мы могли бы утверждать, должен ли Leaflet Image Overlay также принимать узел <img>
вместо строки url. Но вы должны понимать, что Leaflet внутренне применяет классы и слушатели к этому элементу <img>
, поэтому узел, в который вы проходите, будет изменен.
Это не может быть проблематично для вашего дела, но может быть и для других случаев.
Наконец, я не уверен, что в этом будет большая прибыль.
Фактически, вы даже можете избавиться от своей предзагрузочной ссылки <img>
(просто сохраните способ перестроить URL-адрес или сохранить строку URL-адреса в памяти), поскольку единственное, что нужно сделать, чтобы браузер начал получать изображение и иметь его готовый кэш.
Другой подход, действительный только в том случае, если оверлеи имеют один и тот же ограничивающий прямоугольник, L.VideoOverlay
в том, чтобы поместить 50 изображений вместе в видеофайл и использовать L.VideoOverlay
. Затем ваш слайдер должен будет установить время воспроизведения видео, чтобы указать на правильный кадр, вместо переключения изображений.