传单：延迟加载mapbox磁贴

Question

使用Leaflet时如何延迟加载地图图块？

尤其是在移动设备上，我不想一开始就加载maptile，因为我的大多数用户从不向下滚动到地图。

Answer 1

好吧，一个非常简单的技巧就是在地图容器进入视口时创建您的地图，或者至少添加您的图块图层（仅 ）。

那样，在地图实际可见之前就不会请求图块。

关于如何知道何时发生这种情况，您应该在此处和此处找到大量资源。基本上，您比较文档滚动和地图容器的位置，并听滚动事件。最新的解决方案使用Intersection Observer。

Answer 2

L.tileLayer(this.settings.tiles + '/{z}/{x}/{y}.jpg', {...})
    .on('tileloadstart', function(event) {
        event.tile.setAttribute('loading', 'lazy');
    });