Оптимізація завантаження яндекс.карти на сайті - завантаження яндекс.карти при наведенні

Оптимізуючи швидкість завантаження сайту на різних проектах, коли справа доходить до Яндекс.Карт, то тут доводиться шукати непрості рішення, щоб завантаження карти не заважала завантаженні HTML структури. У цій статті я хочу поділитися з вами таким способом завантаження Яндекс.Карт, коли Яндекс.Карти завантажується тільки при наведенні, що значно збільшує швидкість завантаження сайту і зменшує кількість запитів від карт Яндекса.

Відео, до речі, також дуже сильно впливає на швидкість завантаження. Тому рекомендую наступну статтю, де ви дізнаєтеся про те, як зробити завантаження відео по кліку:

• Завантажуємо відео тільки при кліці

Багато хто може згадати GIF файли, адже вони також дуже великого розміру. Щоб їх оптимізувати, краще їх також завантажувати тільки при кліці. Тобто, якщо людина хоче подивитися повну GIF-анімацію, то він клікає на Play і дивиться, інакше не потрібно витрачати трафік користувача на завантаження всього вмісту GIF файлів. Цей спосіб оптимізованої завантаження файлів описаний в наступній статті:

• Завантажуємо GIF тільки при кліці

Чому краще всього завантажувати при наведенні?

Щоб не писати багато тексту, найкраще показати на конкретних цифрах.

Ось всі запити від Яндексу, де карта завантажується одразу після завантаження сторінки (коли ви створили карту за допомогою конструктора карт):

Дивіться приклад

підсумок: 9 зовнішніх скриптів і 44 зображення.

А ось кількість запитів від Яндекса, коли ми завантажуємо тільки API карт Яндекса, а саму завантаження відкладаємо коли вже наведемо:

Дивіться приклад

підсумок: 4 зовнішніх скрипта і 5 зображень. Вже краще, але адже можна ще # 128521; !

Ну і останній (наш оптимізований приклад) список запитів від Яндекса, коли навіть API карт Яндекса завантажуються після наведення:

Відео: 005. Роздрукуй Яндекс.Карти - Вадим Макішвілі

Дивіться приклад

Ось так краще. Зараз не завантажується жоден зайвий файл до тих пір, поки ми не наведемо на саму карту.

Всі файли, доступні для відстежити на вкладці Network (Мережа) в інструментах розробника браузера Google Chrome. Але в Firefox є аналогічний інструмент і ви можете проаналізувати всі запити за допомогою цього браузера.

На жаль, реалізація не така проста, як здається на перший погляд ... Вся справа в тому, що у Яндекс.Карт на даний момент немає callback-а про те, що карта завантажилася повністю. Але, як ви знаєте, якщо ретельно шукати, то проблему напевно можна вирішити. І рішення знайшлося, але про все по порядку ...

Як зробити оптимізовану завантаження Яндекс.Карт?

Насамперед нам необхідно підключити бібліотеку jQuery (можна і без неї), потім прописати стилі для блоку з картою, для індикатора завантаження, а після змусити це все працювати в потрібний час і в потрібному місці. Щоб розкласти все по поличках, будемо все робити за етапами, а якщо залишаться питання, то ви завжди зможете задати їх нижче в коментарях.

1 етап. Підключаємо необхідні скрипти

З сторонніх скриптів тут тільки бібліотека jQuery - скачати jQuery.

Підключаємо перед закриває тегом:

1

lt;script src="Js / jquery.min.js"gt; lt;/scriptgt;

2 етап. Розмітка для карти

Зараз нас необхідно створити структуру для подальшої вставки карти, а також індикатора завантаження, щоб користувач розумів що походить:

1234

lt;div class="Ymap-container"gt;lt;div class="Loader loader-default"gt; lt;/divgt;lt;div id="Map-yandex"gt; lt;/divgt;lt;/divgt;

Нічого складного в цій структурі немає:

• Блок з класом ymap-container - служить як "обгортка" для блоку з індикатором завантаження і блоку з картою.
• Блок з класами loader і loader-default - це наш індикатор завантаження.
• Блок з ідентифікатором map-yandex - тут з`явиться карта Яндекса, коли ми наведемо на "блок-обгортку".

3 етап. Стилі для блоку з картою, а також для індикатора завантаження

Зараз нам необхідно прописати стилі для індикатора завантаження, і навіть для блоку, де з`явиться карта.

Індикатор завантаження, безумовно, відіграє дуже важливу роль. Інакше може виникнути така ситуація: користувач навів на блок, але нічого не відбувається. Якщо у відвідувача інтернет-з`єднання слабке, то завантаження може затягнутися, а якщо він не буде розуміти того, що процес йде, то вирішить, що карта просто не працює.

Але тут є ще один невеликий нюанс: так як карту ми завантажуємо тільки при наведенні, то нам необхідно користувачу показати що карта тут все-таки є. Для цього я зробив скріншот того місця на карті, яке потім завантажитися. А зображення було оптимізовано і потім я його поклав в папку img.

Отже, ось стилі для блоку з картою:

Відео: 2 API Яндекс карт елементи управління картою

123456789101112131415161718192021

/ * # 34-Блок-обгортка # 34-, де ми задаємо фонове зображення скріншотом як на карті * /.ymap-container {position: relative-margin: 3em 0 2em 0-overflow: hidden-cursor: pointer-background: url(`../img/yandex-before-load.jpg`) #ffffff no-repeat-background-position: center center-background-size: cover-box-shadow: 0 0 2em0 rgba(0,0,0,.2)-}/ * Блок, в якому з`явиться Яндекс.Карти * /# Map-yandex {position: relative-z-index: 7-width: 100%-height: 20em-cursor: pointer-background-color: transparent-}

Залишилися стилі тільки для індикатора завантаження:

Відео: Використання API Яндекс Карт, Всеволод Шмиров

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556

/ * Індикатор завантаження, який показується до завантаження карти * /.loader {position: absolute-z-index: 15-top: -100%-left: 0-box-sizing: border-box-width: 100%-height: 100%-overflow: hidden-color: # 000000-transition: opacity .7s ease-opacity: 0-background-color: rgba(0,0,0,.55)-}.loader: after,.loader: before {box-sizing: border-box-}.loader.is-active {top: 0-opacity: 1-}.loader-default: after {position: absolute-top: calc(50% - 24px)-left: calc(50% - 24px)-width: 48px-height: 48px-content: ``-animation: rotation 1s linear infinite-border: solid 8px #ffffff-border-left; color: transparent-border-radius: 50%-}@keyframes rotation {from {transform: rotate(0)-}to {transform: rotate(359deg)-}}@keyframes blink {from {opacity: .5-}to {opacity: 1-}}

Тут я виклав приклад, де немає префіксів, щоб код не був громіздким.

4 етап. Змушуємо все разом працювати (JS)

Щоб забагато не розписувати, опишу лише процес: коли користувач наводить на карту, відображається завантаження (в цей час завантажується API Яндекса, а після сама карта), як тільки картка була завантажена, то індикатор завантаження пропадає:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114

// Змінна для включення / відключення індикатора завантаженняvar spinner = $(`.ymap-container`).children(".loader `)-// Змінна для визначення чи була хоч раз завантажена Яндекс.Карти (щоб уникнути повторного завантаження за наведенні)var check_if_load = false-// Необхідні змінні для того, щоб задати координати на Яндекс.Картеvar myMapTemp, myPlacemarkTemp-// Функція створення карти сайту і потім вставки її в блок з ідентифікатором # 34-map-yandex # 34-function init () {var myMapTemp = new ymaps.Map("Map-yandex", {center: [55.730138, 37.594238], // координати центру на картіzoom: 7, // коефіцієнт наближення картиcontrols: [`ZoomControl`, `FullscreenControl`] // вибираємо тільки ті функції, які необхідні при використанні})-var myPlacemarkTemp = new ymaps.GeoObject({geometry: {type: "Point",coordinates: [55.730138, 37.594238] // координати, де буде розміщуватися прапорець на мапі}})-myMapTemp.geoObjects.add(myPlacemarkTemp)- // поміщаємо прапорець на карту// Отримуємо перший екземпляр колекції шарів, згодом перший шар колекціїvar layer = myMapTemp.layers.get(0).get(0)-// Рішення по callback-у для ухвали повної завантаження картиwaitForTilesLoad(layer).then(function() {// Приховуємо індикатор завантаження після повного завантаження картиspinner.removeClass(`Is-active`)-})-}// Функція для визначення повного завантаження карти (насправді перевіряється завантаження тайлів) function waitForTilesLoad(layer) {return new ymaps.vow.Promise(function (resolve, reject) {var tc = getTileContainer(layer), readyAll = true-tc.tiles.each(function (tile, number) {if (!tile.isReady()) {readyAll = false-}})-if (readyAll) {resolve()-} else {tc.events.once("Ready", function() {resolve()-})-}})-}function getTileContainer(layer) {for (var k in layer) {if (layer.hasOwnProperty(k)) {if (layer[k] instanceof ymaps.layer.tileContainer.CanvasContainer|| layer[k] instanceof ymaps.layer.tileContainer.DomContainer) {return layer[k]-}}}return null-}// Функція завантаження API Яндекс.Карт на вимогу (в нашому випадку при наведенні)function loadScript(url, callback){var script = document.createElement("Script")-if (script.readyState){// IEscript.onreadystatechange = function(){if (script.readyState == "Loaded" ||script.readyState == "Complete"){script.onreadystatechange = null-callback()-}}-} else {// Інші браузериscript.onload = function(){callback()-}-}script.src = url-document.getElementsByTagName("Head")[0].appendChild(script)-}// Основна функція, яка перевіряє коли ми напав на блок з класом # 34-ymap-container # 34-var ymap = function() {$(`.ymap-container`).mouseenter(function(){if (!check_if_load) { // перевіряємо перший чи раз завантажується Яндекс.Карти, якщо так, то завантажуємо// Щоб не було повторного завантаження карти, ми змінюємо значення змінноїcheck_if_load = true-// Показуємо індикатор завантаження до тих пір, поки картка не завантажитьсяspinner.addClass(`Is-active`)-// Завантажуємо API Яндекс.КартloadScript("Https://api-maps.yandex.ru/2.1/?lang=ru_RUloadByRequire=1", function(){// Як тільки API Яндекс.Карт завантажилися, відразу формуємо карту і розміщуємо в блок з ідентифікатором # 34-map-yandex # 34-ymaps.load(init)-})-}})-}$(function() {// Запускаємо основну функціюymap()-})-

Весь код я постарався докладно прокоментувати, щоб все було зрозуміло, але якщо залишилися питання, то ви можете задати їх мені в коментарях.

Завантажити готовий приклад ви можете по посиланню нижче:

Завантажити готовий приклад

висновок

Даний спосіб особливо добре, якщо застосовувати його разом з іншими способами оптимізації: запускаємо Youtube відео тільки при натисканні і запускаємо GIF при натисканні. Тоді ви точно відчуєте приріст в швидкості завантаження.

Якщо у вас з`явилися ідеї і думки на рахунок того, як можна оптимізувати даний спосіб - не соромтеся, пишіть в коментарях! # 128578;

Успіхів!