0

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

5
  • Так а в чём вопрос? Как сделать проект длиннее? ...скролл всегда видимым? ...определить его наличие? Или что?
    – YaCor'
    16 дек 2021 в 7:36
  • в том, чтобы загрузить карту только когда до нее останется 500px
    – Summersby
    16 дек 2021 в 19:04
  • А может тебе не стоит этого делать? *Может воспользуешься уже готовым атрибутом для <iframe loading="lazy"> и не будешь париться с этим... на мобильном тоже тебя ждут приключения, поскольку длинна твоей страницы на разных мобилках будет разной + отслеживание скрола это очень дорогой по продуктивности трекер 16 дек 2021 в 19:33
  • Loading lazy не поддерживается сафари, iframe тоже не могу, только вот так. Спасибо за продуктивность по скроллу, да, как-то упустил такой момент. Если честно, можно и без всяких выкрутасов подключить, но раз уж взялся)
    – Summersby
    16 дек 2021 в 19:51
  • @BlackStar1991 можно использовать debounce для отслеживания скролла 16 дек 2021 в 23:25

1 ответ 1

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/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.