Javascript 使用图像懒散加载的传单bindpop（）

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

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

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

var map=L.map（'map'））
.addLayer（平铺）
.setView（[initLat，initLon]，initZoom）；
var m=L.标记（[lat，lon]）
.bindPopup（“”）
.addTo（地图）；

我的目标是使用延迟加载加载那些图像（上面示例中的“1.jpg”），因此只有在单击标记时才会加载

有人知道怎么做吗

---

谢谢

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

让我们创建一个带有

lazyload

选项且不包含内容的自定义弹出窗口：

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

还有一个演示：

var map=L.map（'map'{
中间：[0,0]，
缩放：1
});
var m=L.marker（[-30,0]）
.bindPopup（L.popup({
懒散负载：“”
}))
.addTo（地图）；
map.on（'popupopen'，函数（e）{
var popen=e.popup；
if（popen.options.lazyload）{
setContent（popen.options.lazyload）；
}
});
html，正文{
身高：100%；
保证金：0；
}
#地图{
宽度：100%；
高度：150像素；
}
实际上，在弹出窗口中填充字符串内容的情况下（就像使用
.bindpoppup（“”）
一样），传单会将其转换（通过
innerHTML
）只有当弹出窗口第一次在地图上打开时，才会加载到DOM节点。因此，您的图像将仅在该时刻加载，这正是您正在寻找的延迟加载行为

因此，您不需要在问题代码中已经完成的工作之外再做任何额外的工作：

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


var map=L.map（'map'{
中间：[0,0]，
缩放：1
});
var m=L.marker（[-30,0]）
.bindPopup（“”）
.addTo（映射）；
html，正文{
身高：100%；
保证金：0；
}
#地图{
宽度：100%；
高度：150像素；
}

谢谢你，nikoshr！那么，我怎样才能检查它是否像我们期望的那样工作呢？打开浏览器工具/网络选项卡，在打开弹出窗口时检查图像是否已加载我非常感谢你，nikoshr！你不知道这对我意味着什么！节省了大量带宽！：）再次感谢！不是真的。如果我有20个标记，我什么也不做，将有20张图片加载，即使我没有点击任何人。谢谢你的评论。请分享一个你描述的行为可以被看到的例子？上面答案中的代码片段证明了这一点，但您可能已经对代码进行了不同的设置。
map.on('popupopen', function(e) {
    var popen = e.popup;
    if (popen.options.lazyload) {
        popen.setContent(popen.options.lazyload);
    }
});