Leaflet bindpop () с использованием lazyload изображений - PullRequest
Новая
       13

Leaflet bindpop () с использованием lazyload изображений

0 голосов
/ 13 июня 2018

Я использую буклет для размещения маркеров на карте.Я установил, что, нажав на маркер, откроется всплывающее окно с изображением.Вот краткий пример: 

var map = L.map('map')
   .addLayer(tile)
   .setView([initLat, initLon], initZoom);

var m = L.marker([lat, lon])
   .bindPopup('<img src="1.jpg"/>')
   .addTo(map);

Моя цель - загрузить эти изображения ("1.jpg" в приведенном выше примере) с использованием отложенной загрузки, поэтому он загружается только при нажатии на маркер.

Кто-нибудь знает, как это сделать?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 14 июня 2018

На самом деле в случае, когда вы заполняете свое всплывающее окно содержимым String (как вы сделали с .bindPopup('<img src="1.jpg"/>'), Leaflet преобразует его (через innerHTML) в узлы DOM только при первом открытии всплывающего окна на карте.изображение будет загружено только в этот момент, что является именно тем ленивым поведением, которое вы ищете.

Так что вам не нужно делать ничего лишнего из того, что вы уже сделали в своем коде вопроса:

(убедитесь, что вы обновили свою страницу / очистили кэш, чтобы увидеть прохождение загрузки изображения в сетевых запросах браузера) 

var map = L.map('map', {
    center: [0, 0],
    zoom: 1
});

var m = L.marker([-30, 0])
    .bindPopup('<img src="https://i.stack.imgur.com/shfxy.jpg?s=32&g=1" />')
    .addTo(map);
html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 150px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>

<div id='map'></div>
0 голосов
/ 13 июня 2018

Вы можете установить содержимое всплывающего окна при его открытии.

Давайте создадим собственное всплывающее окно с параметром lazyload и без содержимого: 

var m = L.marker([0, 0])
    .bindPopup(L.popup({
        lazyload: '<img src="1.jpg"/>'
    }))
    .addTo(map);

Затем вы можете установить глобальный обработчик для заполнения вашего всплывающего окна при необходимости: 

map.on('popupopen', function(e) {
    var popen = e.popup;
    if (popen.options.lazyload) {
        popen.setContent(popen.options.lazyload);
    }
});

И демоверсия: 

var map = L.map('map', {
    center: [0, 0],
    zoom: 1
});

var m = L.marker([-30, 0])
    .bindPopup(L.popup({
        lazyload: '<img src="https://i.stack.imgur.com/shfxy.jpg?s=32&g=1" />'
    }))
    .addTo(map);

map.on('popupopen', function(e) {
    var popen = e.popup;
    if (popen.options.lazyload) {
        popen.setContent(popen.options.lazyload);
    }
});
html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 150px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>

<div id='map'></div>
...