@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>

Если второй оставлю просто в файле, то он не сработает, потому что не видно первого. Подскажите пожалуйста способ загружать второй скрипт, после того как был загружен первый
  • Вопрос задан
  • 259 просмотров
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега JavaScript
  1. Как оптимизировать скорость загрузки сайта с картой?


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

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

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

Войти через центр авторизации
Похожие вопросы
Stream Labs Москва
До 150 000 ₽
Myagi Минск
от 3 000 до 4 000 $
Salesbeat Москва
от 150 000 до 250 000 ₽
17 февр. 2020, в 17:35
15000 руб./за проект
17 февр. 2020, в 17:25
10000 руб./за проект
17 февр. 2020, в 17:20
30000 руб./за проект