Отложенная загрузка Yandex карт API

Коллеги, добрый день На сайте использую Яндекс карту API. Подключаю через script, в src указываю предоставленный путь от Яндекс. Карта работает и отображает. Но встал вопрос о производительности, а именно о скорости загрузки сайта. Помимо я использую скрипт для кастомизации карты:

document.addEventListener('DOMContentLoaded', function () {
   function init() {
      let siteMap = new ymaps.Map("site-map", {
         center: [55.80471227396373, 37.58956129496764],
         zoom: 17
      });

      let placemark = new ymaps.Placemark([55.80468810353046, 37.5902586693115], {}, {
         iconLayout: 'default#image',
         iconImageHref: '../icons/icon.svg',
         iconImageSize: [70, 70]
      });

      siteMap.behaviors.disable('scrollZoom');

      siteMap.controls.remove('geolocationControl');
      siteMap.controls.remove('searchControl');
      siteMap.controls.remove('trafficControl');
      siteMap.controls.remove('typeSelector');
      siteMap.controls.remove('fullscreenControl');
      siteMap.controls.remove('zoomControl');
      siteMap.controls.remove('rulerControl');
      siteMap.controls.remove(['scrollZoom']);
      siteMap.geoObjects.add(placemark);
   }

   ymaps.ready(init);
});

Для отложенной загрузки, на просторах интернетов нашел следующий скрипт:

let ok = false;                    
window.addEventListener('scroll', function() {
    if (ok === false) {
        ok = true;    
        setTimeout(() => {                    
            let script = document.createElement('script');
            script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A2467dfbbd414306f38c00aa9048346ada3bf2ae105b1d1c84eb6a671b54fc5cd&width=100%25&height=300&lang=ru_RU&scroll=false';
            document.getElementById('site-map').replaceWith(script);                        
        }, 1000)    
    }
});

В script.src я использую выше мной упомянутый путь предоставленный Яндексом, но вместо карты на странице вижу пустой блок.

Подскажите пожалуйста кто сталкивался с подобной задачей? Может есть какое-то другое решение?

Спасибо


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

Автор решения: Виктор Карев

После того, как сработает document.getElementById('site-map').replaceWith(script); на странице больше нет элемента с id = 'site-map'.

Поэтому

let siteMap = new ymaps.Map("site-map", {
         center: [55.80471227396373, 37.58956129496764],
         zoom: 17
      });

не срабатывает.

→ Ссылка
Автор решения: El Jeko

Решение, как и в большинстве случаев оказалось на поверхности (следует внимательнее читать документацию API Yandex карты).

Из скрипта необходимо было убрать слушатель события DOMContentLoaded. Без него все работает.

→ Ссылка