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);
    }
});

一个演示：

＆＃13;

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);
    }
});

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 150px;
}

＆＃13;

<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>

＆＃13;

Answer 2

实际上，如果您使用String内容填充弹出窗口（就像使用.bindPopup('<img src="1.jpg"/>')一样），只有在首次打开Popup时，Leaflet才会将其（通过innerHTML）转换为DOM节点因此，您的图像将仅在此时加载，这正是您正在寻找的延迟加载行为。

所以你不需要在你的问题代码中做过任何额外的事情：

（确保刷新页面/清除缓存以查看浏览器网络请求中的图像加载传递）

＆＃13;

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);

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 150px;
}

＆＃13;

<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>

＆＃13;

使用lazyload图像的Leaflet bindpop（）

2 个答案: