Пытаюсь сделать так, чтобы карта загружалась при скролле, например, за 500px до контейнера с ней. Сейчас получается так, что ее высота равна высоте всего скролла проекта
let mapLoaded = false;
window.addEventListener('scroll', lazyLoadMap);
function lazyLoadMap() {
let scrollY = window.scrollY;
let mapOffset = document.querySelector("#map").offsetTop;
if ((scrollY >= mapOffset - 500) && (!mapLoaded)) {
ymaps.ready(function() {
var myMap = new ymaps.Map('map', {
center: [55.759927, 37.604098],
zoom: 14
}, {
searchControlProvider: 'yandex#search'
}),
myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
hintContent: 'Мы здесь',
balloonContent: 'Леонтьевский переулок'
}, {
iconLayout: 'default#image',
iconImageHref: 'img/icon-map.svg',
iconImageSize: [20, 20],
iconImageOffset: [-5, -38]
});
myMap.geoObjects
.add(myPlacemark)
myMap.controls.remove('searchControl');
myMap.controls.remove('trafficControl');
myMap.controls.remove('fullscreenControl');
myMap.controls.remove('rulerControl');
myMap.controls.remove('typeSelector');
myMap.controls.remove('zoomControl');
});
mapLoaded = true;
}
}
<div class="contacts__map" id="map" style="width: 600px; height: 400px"></div>
<script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU"></script>
<iframe loading="lazy">
и не будешь париться с этим... на мобильном тоже тебя ждут приключения, поскольку длинна твоей страницы на разных мобилках будет разной + отслеживание скрола это очень дорогой по продуктивности трекер