Notes

Lazy ленивая загрузка яндекс карты

В последнее время гугл pagespeed отнимает гору очков если на сайте есть интерактивная карта яндекса.

Потому сделаем её статической, а загрузку при наведении мыши:

1. Сначала построим карту яндекса (https://yandex.ru/map-constructor/) и получим скрипт , например такой:

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

2. На своем сайте напишем контейнер для блока карты и стили для нашей статичной картинки(её можно сделать скриншотером):

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

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

3. Скрипт обработки события:

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//once start, thereafter destroy listener
        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. Пример работы можно оценить здесь.

Я скопировал эту статью на хабр (там можно поставить ей лайк)

 

Афоризм дня:
Кто кажется страшным, тот не может быть свободным от страха. (623)

4 years ago

Спасибо большое, всё работает как надо., :) Это лучшее решение, которое мне удалось найти.

4 years ago

Отлично, рад слышать!

4 years ago

Огромное спасибо! Очень помогло и прекрасно работает. Возможно ли сделать что-то подобное для кода Яндекс.Поиск на сайте ?

4 years ago

не понял, поясните вопрос, какого кода "Яндекс.Поиск"?

3 years ago

Ребята а если у меня три карты на сайты и я их хочу сделать отложенной загрузкой когда несколько карт?? Вот такой код совсем не работает <div class="popup"> <div id="map" class="maps" style="height:350px;"> <h3>Санкт-Петербург, ул. Ремесленная д.7</h3> <script id="ymap_lazy" type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Aaebcb2c03832dd3ede506392577799ad9f6857e33f1141d058450311b5f14a0e&amp;width=500&amp;height=500&amp;lang=ru_RU&amp;scroll=true"></script> </div> <div id="map2" class="maps"> <h3>Санкт-Петербург, Московский пр, 148Д</h3> <script id="ymap_lazy2" type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1c5644b83d76f125bd13c4f5e337bd46c0c00a1e6732c0eea96a2fe053cf60fe&amp;width=500&amp;height=500&amp;lang=ru_RU&amp;scroll=true"></script> </div> <div id="map3" class="maps"> <h3>Санкт-Петербург, Школьная улица, 75А</h3> <script id="ymap_lazy3" type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Acc0937dd2d98573f3b8a7c3eadd43f755a5592ba737a075bdda28872a655b8e7&amp;width=500&amp;height=500&amp;lang=ru_RU&amp;scroll=true"></script> </div> <script> let map_container = document.getElementById('map'); 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> </div>

3 years ago

как быть с гугл картой, там iframe?

Leave a reply

Яндекс.Метрика