Для бизнес-ресурсов довольно часто используется интерактивная карта на сайте. В большинстве случаев клиенты хотят добавить карту Google , потому что это то, что используют многие люди. Проблема в том, что такая карта загружает много JavaScript, шрифтов расположенных на стороннем Google сервере и изображений.
Эти карты часто помещаются внизу страницы. Множество людей, вероятно, никогда не увидит карту. Таким образом, карта будет просто появляться в “водопаде” загружающихся ресурсов страницы и замедлять её загрузку.
LazyLoad здесь придёт на помощь, так как будет показывая карту только если она становится видимой при прокрутке (скроле) вниз. Для этого варианта браузеры могут использовать API IntersectionObserver . Для браузеров, которые не поддерживают этот API, вы можете загрузить Polyfill IntersectionObserver W3C.
Для достижения ленивой загрузки вам придется загружать API Карт Google с помощью JavaScript, а не напрямую из HTML. Для этого я буду использовать Loadament Group loadJS.
Ниже приведен код для реализации ленивой загрузки карты. Чтобы увидеть как это работает в действительности обратите внимание на фейс CodePen в конце страницы.
Конечно, вы также можете использовать эту технику с другими картами, например, с Leaflet и OpenStreetMap или Yandex картами.
При загрузке API Карт Google вам необходимо установить обратный вызов, который доступен на вашей веб-странице. В моем примере это:
google_maps_init
В этой функции вы определяете все настройки для своей карты. Она будет вызываться после завершения загрузки API. Вы также должны предоставить ключ API Карт Google в данном блоке:
google_maps_lazyload("API KEY")
Для запуска IntersectionObserver вы должны использовать observer.observe(element). Как только карта начнет загружаться, вы можете прекратить наблюдение с помощью:
observer.unobserve(element)
Так что продолжайте повышать продуктивность своих проектов при помощи отложенной загрузки не совсем обязательных элементов страницы, как это показано в примере ниже.
Полностью весь используемый и необходимый код HTML, CSS, jQuery: