Это нужно для того, чтобы пока собирается страница, ей не мешали непервостепенные задачи. Тем более сторонний ресурс может застрять и серьезно этим все замедлить.
Если кто увлекается высоким показателем 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, как предлагает Яндекс, чтобы отключить ее масштабирование при прокрутке.
Его заменяем на <div id="yamap"></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>
На этой странице используется тот же код, но для наглядности (пока вы читаете и т.д.), карта начнет загружаться через 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 секунд..
По такому же принципу можно подключать любые другие внешние скрипты, например месенджеры или квизы, а также внутренние, работа которых должна осуществляться не сразу.
Можно пример вставки карты?
Он же есть 🙂