传单绑定pop()使用延迟加载的图像

Question

我正在使用传单在地图上放置一些标记。我已经设置了，单击标记，将打开一个弹出窗口，显示图像。下面是一个简短的示例：

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"(，因此只有在我单击标记时才加载它。

有谁知道如何做到这一点？

谢谢！

Answer 1

您可以在打开弹出窗口时设置弹出窗口的内容。

让我们创建一个带有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>

Answer 2

实际上，如果您用字符串内容填充弹出窗口(就像您对.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>