Загрузка и инициализация API Яндекс карт при скролле

83
Алексей,

API карт весит много, js код тяжёлый. Загружать сразу - плохая идея. Если карта появляется по клику, в попапе или она находится внизу страницы (т.е. не видна на первом экране), то и загрузку можно отложить до момента, когда карта станет "видна".

Для определения видимости буду использовать Intersection Observer. Он позволяет определить видимость html элемента без костылей вида: $(window).on('scroll') со сравнением position элемента.
Пользоваться примерно так:

var iObserver = new IntersectionObserver(function(entries) {
    if (entries[0].isIntersecting === true) {
        loadMap();
    }
}, {threshold: [0]}); // от 0 до 1, % видимой части элемента на экране

iObserver.observe(document.getElementById('map'));

function loadMap () {
	let map = document.getElementById('map');
	if (!map.classList.contains("js--loaded")) {
		map.classList.add("'js--loaded");
	
		if (typeof ymaps === "undefined") {
			let js = document.createElement('script');
			js.src = "https://api-maps.yandex.ru/2.1/?lang=ru_RU";
			document.getElementsByTagName('head')[0].appendChild(js);
			js.onload = function() {
				ymaps.ready(init);
			};
		} else {
			ymaps.ready(init);
		}
	}
}

caniuse пишет, что Intersection Observer работает в 94% браузеров https://caniuse.com/intersectionobserver

Опубликовано 31 мая 2021
js, производительность, разработчику, Яндекс.Карты
Поделиться
Похожие статьи
Загрузка js по событию начала активности пользователя 0
Я всё мучаю загрузку яндекс карт. Уж слишком они тяжелые, сразу грузить нельзя, а при открытии они з...
Читать дальше »
Алексей,
Яндекс карты. Изменение значка метки при наведении у списка объектов 0
Такой простой функционал оказалось не так просто реализовать. Нельзя просто взять и зайти в options ...
Читать дальше »
Алексей,
Комментарии
Зарегистрируйтесь чтобы получать уведомления об ответе
API карт весит много, js код тяжёлый. Загружать сразу - плохая идея. Если карта появляется по клику, в попапе или она находится внизу страницы (т.е. не видна на первом экране), то и загрузку можно отложить до момента, когда карта станет "видна".