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

Google Maps API + B-Lazy + King Composer – или отложенная загрузка карт

1 398

Задача загрузить карты Google отложено, то есть после того момента когда пользователь доскролил до блока с картой.

Для этого нам понадобятся:

Знание Google Maps API и и Ваш личный key

Подключение библиотеки отложенной загрузки B-Lazy

Изображение которое будет отображаться место нашего блока с картой

Изображение маркера

Вариант 1 — без кастомизации карты (перед блоком с картами должен отработать скрипт b-lazy):

Вариант 2 — Если хотим что бы отображался прилоадер пока карта не отобразилась прописываем стили (внимательно читаем код стилей, там полезный комментарий):

.SDStudio_Preloader { /* Качаем прилоадеры здесь: https://mediadoma.com/_PRIMERU/Preloader/001_preloader-ZAGRUZKA.gif https://mediadoma.com/_PRIMERU/Preloader/002_preloader-KRUG.gif Далее загружаем прилоадер в корень сайта*/ background: transparent url(/loading.gif) center center/cover no-repeat scroll; background-size: 150px !important; }

И добавляем div'у класс .SDStudio_Preloader:

Вариант 3 — с кастомным маркером (перед блоком с картами должен отработать скрипт b-lazy):

Источник записи: https://mediadoma.com

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