Это нужно для того, чтобы пока собирается страница, ей не мешали непервостепенные задачи. Тем более сторонний ресурс может застрять и серьезно этим все замедлить.
Если кто увлекается высоким показателем PageSpeed Insights от Google, то это тем более необходимо.
Для решения этой задачи можно использовать более профессиональный вариант с плагином jQuery.Lazy или добавить несколько строк кода под конкретный сторонний скрипт из примеров ниже.
Пример отложенной загрузки Яндекс Карты
Код, который дает конструктор карт Яндекса выглядит примерно так:
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A2467dfbbd414306f38c00aa9048346ada3bf2ae105b1d1c84eb6a671b54fc5cd&width=100%25&height=300&lang=ru_RU&scroll=false"></script>
Если карта на всю ширину страницы и находится не в самом ее низу, то лучше всегда указывать scroll=false, а не true, как предлагает Яндекс, чтобы отключить ее масштабирование при прокрутке.
Его заменяем на:
|
1 2 3 |
<div class="yamap_wrap"> <div id="yamap"></div> </div> |
И добавляем скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 |
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('yamap').replaceWith(script); }, 1000) } }); |
В итоге наша карта начнет грузиться через 1 секунду после того, как пользователь прокрутил страницу вниз и появится вместо блока <div id="yamap"></div>
Для контейнера yamap_wrap задаем нужные стили (высоту, рамки, фон и т.д.)
На этой странице используется тот же код, но для наглядности (пока вы читаете и т.д.), карта начнет загружаться через 10 секунд.
Работает все просто, после изменения прокрутки мы ставим таймаут и создаем элемент script, который и есть наша карта. Переменная ok нужна для одного повторения действия.
Пример отложенной загрузки виджета группы ВК
По умолчанию мы имеем примерно такой код:
|
1 2 3 4 5 |
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?168"></script> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 3, width: "auto"}, 139814286); </script> |
Вместо него ставим просто <div id="vk_groups"></div> и добавляем скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
let ok = false; window.addEventListener('scroll', function() { if (ok === false) { ok = true; setTimeout(() => { let script = document.createElement('script'); script.src = 'https://vk.com/js/api/openapi.js?168'; document.getElementById('vk_groups').after(script); script.onload = function() { VK.Widgets.Group("vk_groups", {mode: 3, width: "auto"}, 139814286); } }, 1000) } }); |
Как и в первом примере, виджет появится через 10 секунд..
По такому же принципу можно подключать любые другие внешние скрипты, например месенджеры или квизы, а также внутренние, работа которых должна осуществляться не сразу.
Почему-то по высоте выводится узкий очень.. карта узкая..
думал какие-то другие параметры мои меняют это - так нет - дело в скрипте, так как ставил обычным яндекс скриптом в то же м есто и все ок
Поместите карту (<div id="yamap"></div>) в контейнер с заданной высотой.
После обновления карт, они там поменяли что то.
вы в статью добавили <div class="yamap_wrap"> обертку? ей задал высоту щас все ок))) спасибо!!!
Вы сделали отложенную загрузку для конкретной карты, а что если на каждой странице карты разные, на разные города. Как поменяется код?
По ситуации нужно смотреть, можно создать 2-3 разных скрипта и заменить ими дивы по айди, или использовать плагин Отложенная загрузка JavaScript или еще как то.
А как делать отсрочку в сек., если 10 не нужно, а нужно, например, 3 сек.
1000 - это 1 секунда, соотв 3 секунды будет 3000
Супер! Благодарю)
Можно пример вставки карты?
Он же есть 🙂
А если карта подключается через фрейм?
Попробуйте, также как и скрипт, только вместо скрипта фрейм.
Размеры можно задать через CSS для него.