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

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

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

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

var iObserver = new IntersectionObserver(function(entries) {
	if (entries[0].isIntersecting === true) {
		loadMap();
		iObserver.unobserve(entries[0].target); // перестаём отслеживать видимость
	}
}, {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);
			};
			js.onerror = function() {
				console.log('error load ymaps');
			};
		} else {
			ymaps.ready(init);
		}
	}
}

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

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.