1

Коллеги, добрый день На сайте использую Яндекс карту 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 я использую выше мной упомянутый путь предоставленный Яндексом, но вместо карты на странице вижу пустой блок.

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

Спасибо

5
  • 1
    Не надо постоянно выдумывать откладывание загрузки, поскольку скрипт и так берётся из кэша. При однократной загрузке API Яндекс Карт на любом сайте она сохраняется в кэш и на любом другом сайте грузится уже не из сети. Зачем откладывать локальную загрузку?
    – YaCor'
    Commented 7 нояб. 2023 в 13:31
  • @YaCor' такая необходимость возникла из-за того, что сайт проходит проверку на скорость загрузки с показателем ниже среднего. Поэтому возникла такая необходимость.
    – El Jeko
    Commented 7 нояб. 2023 в 14:48
  • Не следует доверять этим анализаторам, если речь заходит о реальной работе с сайтом и пользователями. Но в целом можно перенести вызов init() в задержку. Тогда после скролла и ожидаемой ошибки вызова ещё не загруженного ymaps карта всё равно загружается. jsbin.com/hezazim/edit?js,output
    – YaCor'
    Commented 7 нояб. 2023 в 20:59
  • @YaCor' дело в том, что, если я использую свою ссылку с идентификатором от Яндекса, то карта не прогружается.
    – El Jeko
    Commented 8 нояб. 2023 в 15:30
  • Что значит "свою ссылку с идентификатором от Яндекса"? Покажите, чем ваш код отличается от предложенного мной выше, который работает?
    – YaCor'
    Commented 9 нояб. 2023 в 17:10

2 ответа 2

0

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

Поэтому

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

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

3
  • да, я понимаю. Я менял строку document.getElementById('site-map').replaceWith(script); и добавлял script в конец документа. Но опять же ничего не работало.
    – El Jeko
    Commented 9 нояб. 2023 в 7:36
  • При подключении скрипта используйте параметр onload: yandex.ru/dev/jsapi-v2-1/doc/ru/v2-1/dg/concepts/load Commented 9 нояб. 2023 в 11:51
  • к сожалению скорость загрузки все так же оставляет желать лучшего.
    – El Jeko
    Commented 9 нояб. 2023 в 13:09
0

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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