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

Question

Пытаюсь сделать так, чтобы карта загружалась при скролле, например, за 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>

Answer 1

Для начала надо добавить контент перед картой, чтобы появился отслеживаемый скролл.

<div id="before_map" style="width: 600px; height: 2000px"></div>

Затем следует начать определять ещё и высоту видимой части экрана, иначе не узнать, сколько от нижнего края страницы до карты.

let viewHeight = document.documentElement.clientHeight

Ну а дальше останется лишь чуть скорректировать вашу строку для загрузки:

if ((scrollY >= mapOffset - 500 - viewHeight) && (!mapLoaded)) {...}

Подправленный пример: https://jsfiddle.net/sgpoeh5q/

БЛОГ НА HUSL

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

Ответы (1 шт):