@podkudahka
крутой

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

Нашел такой способ
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>

Если второй оставлю просто в файле, то он не сработает, потому что не видно первого. Подскажите пожалуйста способ загружать второй скрипт, после того как был загружен первый
  • Вопрос задан
  • 296 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
  1. Как оптимизировать скорость загрузки сайта с картой?


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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы