URL скопирован в буфер обмена!
Как оптимизировать загрузку Яндекс карты на Tilda?
При помощи данной модификации можно сделать отложенную загрузку Яндекс карты. Карта будет подгружена только после полной загрузки страницы сайта. На время загрузки вместо карты показывает прелоадер с анимацией и вашим текстом.
Модификация обновлена. Добавлена настройка скругления углов Яндекс карты
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Код Яндекс карты
Цвет прелоадера
Цвет фона контейнера
Текст под точками
Цвет текста
Скругление углов у карты
Класс HTML контейнера
Радиус углов
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD051--><div id="ti_map" style="width: 100%; height: 100%; position: relative;">
<div id="TiCodeLoad" class="loader">
<div class="ti-dot-container">
<div class="ti-dot1"></div>
<div class="ti-dot2"></div>
<div class="ti-dot3"></div>
</div>
<div class="ti-loading-text">Map Loading...</div>
</div>
<script type="text/javascript" charset="utf-8">
function initializeYandexMap() {
var TiCodeLoad = document.getElementById('TiCodeLoad');
TiCodeLoad.style.animation = 'none';
TiCodeLoad.style.backgroundColor = 'transparent';
setTimeout(function() {
TiCodeLoad.style.display = 'none';
}, 100);
}
setTimeout(function() {
var TiCodeLoad = document.getElementById('TiCodeLoad');
TiCodeLoad.style.backgroundColor = '#FAFAFA';
var script = document.createElement('script');
script.src = '&width=100%25&height=100%25&lang=ru_RU&scroll=true';
script.onload = initializeYandexMap;
document.getElementById('ti_map').appendChild(script);
}, 3000);
</script>
</div>
<style>
.loader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
background-color: #FAFAFA;
}
.ti-dot-container {
display: flex;
justify-content: center;
align-items: center;
}
.ti-dot1, .ti-dot2, .ti-dot3 {
width: 10px;
height: 10px;
background-color: #F96855;
border-radius: 50%;
margin: 0 5px;
animation: bounce 1.5s infinite;
}
.ti-dot2 {
animation-delay: 0.5s;
}
.ti-dot3 {
animation-delay: 1s;
}
.ti-loading-text {
margin-top: 10px;
font-family: Arial, sans-serif;
color: #F96855;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.ti-map-radius {
border-radius: 0px !important;
overflow: hidden !important;
}
</style>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем карту через конструктор Яндекс карт;
2. Размеры карты не меняем. Нажимаем кнопку "получить код карты" и копируем JavaScript код карты. Смотреть скрин
3. Вставляем код в генератор в поле "Код Яндекс карты" и при необходимости указываем дополнительные настройки:
Цвет прелоадера - указываем цвет точек прелоадера.
Цвет фона контейнера - указываем цвет контейнера. Это область в которую будет подгружатся Яндекс карта.
Текст под прелоадером - можно указать свой текст, который будет отображаться под точками прелодера.
Цвет текста - указываем цвет текста.
Скругление углов у карты - если включено, то можно дополнительно скруглить углы в Яндекс карте.
Класс HTML контейнера - указываем класс контейнеру в котором размещена карта;
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Радиус углов - указываем радиус скругления углов;
4. Копируем готовый код и вставляем в HTML элемент внутри Zero Block. Карта будет занимать 100% область HTML контейнера. Для адаптации достаточно менять размеры самого HTML контейнера.
2. Размеры карты не меняем. Нажимаем кнопку "получить код карты" и копируем JavaScript код карты. Смотреть скрин
3. Вставляем код в генератор в поле "Код Яндекс карты" и при необходимости указываем дополнительные настройки:
Цвет прелоадера - указываем цвет точек прелоадера.
Цвет фона контейнера - указываем цвет контейнера. Это область в которую будет подгружатся Яндекс карта.
Текст под прелоадером - можно указать свой текст, который будет отображаться под точками прелодера.
Цвет текста - указываем цвет текста.
Скругление углов у карты - если включено, то можно дополнительно скруглить углы в Яндекс карте.
Класс HTML контейнера - указываем класс контейнеру в котором размещена карта;
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
Радиус углов - указываем радиус скругления углов;
4. Копируем готовый код и вставляем в HTML элемент внутри Zero Block. Карта будет занимать 100% область HTML контейнера. Для адаптации достаточно менять размеры самого HTML контейнера.
Map Loading...
Обновите страницу для просмотра отложенной загрузки Яндекс карты
