问使用图像的lazyload的传单bindpop()
EN

Stack Overflow用户

提问于 2018-06-12 14:40:47

回答 2查看 1.3K关注 0票数 1

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

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”)，因此只有在单击标记时才加载这些图像。

有人知道怎么做吗？

谢谢!

javascript

leaflet

lazy-loading

marker

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-13 03:41:35

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

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

票数 2

Stack Overflow用户

发布于 2018-06-14 00:27:00

实际上，在弹出窗口中填充字符串内容的情况下(就像您对.bindPopup('<img src="1.jpg"/>')所做的那样)，只有在弹出窗口首次在地图上打开时，传单才会将它(通过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>