🕋 😦 ❔ 延迟加载地图 🙋🏻 👁️ 📓

如果页面具有交互式Yandex或Google地图，则可能需要花费几秒钟的加载速度，并且可以破坏Google PageSpeed报告。

在本文中，我将描述优化Yandex映射连接的示例，当您将鼠标悬停在该连接上时，将以惰性方式加载该连接。

1.首先，让我们构建一个Yandex地图（在此处）并获得一个脚本，如下所示：

<script type="text/javascript" 
        charset="utf-8" 
        async 
        src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>

2.在我们的网站上，我们将为卡块编写一个容器：

<div id="map_container" class="map container-fluid">
<script id="ymap_lazy"
        async
        data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>
</div>

以及静态图片的样式（使用任何屏幕截图更容易实现）：

<style>
    .map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(/uploads/common/ymap0.png);
        background-position: center center;
    }
</style>

3.最有趣的事情是编写JavaScript代码，该代码将跟踪鼠标悬停或单击手机触摸屏上的事件，并将静态图像替换为交互式地图：

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//  ,    
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data_src');
            console.log('YMAP LOADED');
        }
    }
</script>

4.利润！您的网站现在加载速度更快！

PS：此方法还可以适用于不需要JS和CSS的其他对象，由于这些对象，页面加载速度可能不到一秒钟。

延迟加载地图

More articles: