Loading...

Как оптимизировать загрузку Яндекс карты в Tilda?

Модификация оптимизирует загрузку Яндекс карты при помощи отложенной загрузки, а прелоадер скроет "появление" карты
Время настройки: 1 минута
Генератор кода
Видео
Пример
Обнови страницу, что бы увидеть прелоадер
Инструкция
Модификация ускоряет загрузку сайта и увеличивает показатели в Google PageSpeed

1. Создаем карту в конструкторе https://yandex.ru/map-constructor

2. Копируем код карты, вставляем в первое поле генератора

3. Настраиваем стиль прелоадера для карты

4. Копируем код и вставляем у себя на сайте в зеро блок в элемент html.
Размеры карты будут соответствовать размеру html элемента

Важно: При копировании кода из Яндекса, ничего в нем менять нельзя!
Ссылка из конструктора
Размер прелоадера (px)
Размер бордера (px)
Цвет прелоадера
Цвет фона прелоадера
Непрозрачность
Копировать код<!-- Как оптимизировать загрузку Яндекс карты в Tilda? -->
<!-- https://nolim.cc/min-yandex-map -->
<div id="kartazero" class="wsending" style="width: 100%;height: 100%;"></div> <script> function myandexmap() { setTimeout(function(){ $('#kartazero').removeClass('wsending'); },800); var js=document.createElement('script'); let parent = document.querySelector('#kartazero'); js.src = ""; parent.appendChild(js); } $(window).on('load', function() { setTimeout(myandexmap, 3000); }); </script> <style> .wsending { opacity: 0.5; pointer-events:none; } .wsending:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin-top: -75px; margin-left: -75px; border-radius: 50%; border: 6px solid #ccc; border-top-color: #333; animation: t-submit-spinner .6s linear infinite; } </style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda