TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

jQuery – Lazy Load для Google Maps API

3 020

Для бизнес-ресурсов довольно часто используется интерактивная карта на сайте. В большинстве случаев клиенты хотят добавить карту 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:

Пример отработки скрипта

Источник записи:

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее