EN EN

Ленивая (отложенная) загрузка яндекс карты на чистом JavaScript

Загрузка карты на сайте при наведении на экран или при скролле

⬅️ Вернуться к статьям
Дата публикации AccelLoad
25 июля 2022
Количество просмотров AccelLoad
80
Теги AccelLoad
Конструктор карт Яндекса
ymaps
JavaScript
JS
API
Ленивая (отложенная) загрузка яндекс карты на чистом JavaScript

Скорость и загрузка сайта - одни из важных пунктов для роботов поисковых систем, влияющих на индексацию и ранжирование сайта в поиске.

Но когда мы говорим о Яндекс или Google картах, то с ними чаще всего сложнее оптимизировать работу сайта, ведь они потребляют немало ресурсов для своей загрузки. Об этом нам более подробно рассказывает Google PageSpeed Insights.

Ниже представлен код на чистом JavaScript, который загружает карту в блок с идентификатором (id) "map", но только в том случае, если посетитель сайта наведёт курсор мыши на экран или сделает скролл.

Ленивая загрузка Яндекс карты


<div class="map" id="map"></div>
<script>
    if (document.querySelector('#map')) {
        var YaMaps = !1;
        function loadMap() {
            !1 === YaMaps && (YaMaps = !0, setTimeout(() => {
                const script = document.createElement('script');
                script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A50e3fe2a8372135d016d48cd877ff4579d935004f028651c1ee533b029e0a304&lang=ru_RU&scroll=false';
                document.getElementById('map').appendChild(script);
            }, 500)); // 500 - функция сработает через полсекунды
        }
        window.addEventListener('mousemove', () => loadMap()); // mousemove - событие движение курсора
        window.addEventListener('scroll', () => loadMap()); // scroll - событие скролл
    };
</script>

В данном примере, в значении script.src указан код полученный нами при создании карты в сервисе Конструктор карт Яндекса, вам необходимо будет указать свой.
Скролл вверх