Как оптимизировать скорость загрузки сайта с картой?

Question

[Василий Хрягин]

Нашел такой способ

var reviews = $('#review-section'),
      reviewsTop = reviews.offset().top;
      $(window).bind('scroll', function() {
        var windowTop = $(this).scrollTop();
        if (windowTop > reviewsTop) {
          $('#contacts-map').html(`<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>`);
          $(window).unbind('scroll');
        }
      });

То есть здесь подгружает скрипт после прокрутки середины страницы. Но мне надо подгрузить еще вот такой скрипт

<script>ymaps.ready(function(){var e=new ymaps.Map("contacts-map",{center:[55.74751,37.620725],zoom:18},{searchControlProvider:"yandex#search"}),t=ymaps.templateLayoutFactory.createClass('<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'),o=new ymaps.Placemark([55.74751,37.620725],{hintContent:"Одинцовский район, д.п. Лесной городок, ул. Фасадная 2 стр. 2"},{iconLayout:"default#imageWithContent",iconImageHref:"img/contacts/metka.png",iconImageSize:[154,68],iconImageOffset:[0,-34],iconContentOffset:[15,15],iconContentLayout:t});e.behaviors.disable("scrollZoom"),e.geoObjects.add(o)});</script>

Если второй оставлю просто в файле, то он не сработает, потому что не видно первого. Подскажите пожалуйста способ загружать второй скрипт, после того как был загружен первый

Answer 1

[Alex]

1. Как оптимизировать скорость загрузки сайта с картой?

   
   
   Не загружайте скрипты карты изначально вообще. В место где должна быть карта можно вставить заранее подготовленную картинку карты, это нужно для тех случаев если ваш скрипт по каким-то причинам не загрузится. Позже она будет подменяться на настоящую карту.
   
2. Далее, используйте Intersection Observer API чтобы определить когда пользователь доскролит до карты, чтобы начать её загружать.
   
3. Про ленувую загрузку скриптов в интернете полно материалов (например тут).
   

4. Подскажите пожалуйста способ загружать второй скрипт

   
   У объекта script есть события onload onerror. В обработчике события onload вы удаляете картинку, и на её месте вставляете карту со всеми необходимыми параметрами.
   

Comments

[Karpion]

Решение "определить когда пользователь доскролит до карты, чтобы начать её загружать" часто раздражает. Хочется, чтобы всё нужное загружалось заранее.