Как загружать Яндекс Карту на сайте по доскролу?

Question

[Андрей Филимонов]

Здравствуйте, как начать загружать Яндекс карту только тогда, когда она попадает в поле видимости экрана?

Оптимизирую страницу,
1. знаком с вариантом отложенной загрузки яндекс карты, не подошло, удлиняет время загрузки страницы;
2. знаком с загрузкой по наведеню, хорошо показало себя, но в мобилке вообще может не быть наведения, пользователь может мимо блока пальцем пролистать, а если седалать на всю высоту экрана, то может застрять в скроле карты и не добраться до остального контента на странице;
3. знаком по доскролу до гугл карты, а надо яндекс;
4. видел с jQuery и расчётом пикселей снизу страницы, но не понял, как применять, не смог реализовать.

Answer 1

[Nik Faraday]

Можно попробовать вызвать специальный метод, который будет её прогружать, когда вы будете скрольту нижу. Для этого можно использовать высоту экрана получив её из document.documentElement. Подробнее тут.
Далее можно просто проверять через if высоту прокрутки, если она равна или больше той, которая вам нужна, вызывать скрипт для рендринга/инициализации/и т.д. вашей карты

Comments

[Андрей Филимонов]

наверное, это решение, но, извините, не понимаю, как его применить. Может вы смогли бы шаблон показать, куда свои переменные подставлять?

[Nik Faraday]

Андрей Филимонов, Что именно вы не понимаете, подскажу, что скажете )

[Nik Faraday]

Андрей Филимонов, Объявите переменную, куда записать высоту прокрутки страницы, т.е., как далеко пользователь опустился по странице

let width = window.pageYOffset;

Далее делаем это можно засунуть внутрь функции, которая проверяет скролинг страница. Подробнее тут

$( window ).scroll(function() {
  let width = window.pageYOffset;

  if(width >= somethingWidth) {
  ...
  }
});

И вот, в блок if засовываете ТО, что будет делаться КОГДА пользователь опустится слишком низко по странице. В вашем случае, вы будете загружать карту )

[Андрей Филимонов]

Nik Faraday, примерно в таком ключе:

от Конструктора карт получаем типа такое:

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A2467dfbbd414306f38c00aa9048346ada3bf2ae105b1d1c84eb6a671b54fc5cd&amp;width=100%25&amp;height=300&amp;lang=ru_RU&amp;scroll=false"></script>

если его прямо вставлять, то он сразу начинает грузится. Отложим старт на 1 секунду. Вставим див, где должна быть карта:

<div id="yamap"></div>

а затем скрипт:

let ok = false;                    
window.addEventListener('scroll', function() {
    if (ok === false) {
        ok = true;    
        setTimeout(() => {                    
            let script = document.createElement('script');
            script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A2467dfbbd414306f38c00aa9048346ada3bf2ae105b1d1c84eb6a671b54fc5cd&width=100%25&height=300&lang=ru_RU&scroll=false';
            document.getElementById('yamap').replaceWith(script);                        
        }, 1000)    
    }
});

собственно после script.src = вставляется соурс карты, полученной от Конструктора, а 1000 в миллисекундах будет 1 секунда.

Вот примерно с таким шаблоном бы я и будущие поколения ищущих легко бы решили загрузку Яндекс карты по доскролу)

Не сомневаюсь в правильности вашего ответа, но его не получится применить, с такой инструкцией как

блок if засовываете ТО, что будет делаться КОГДА пользователь опустится слишком низко по странице

не справится на том уровне, что не понятно в каком виде это ТО засовывать. Лишняя скобка или запятая, и ничего не сработает. Поэтому шаблон с переменными, которые будут отличаться у каждого, это самое нужное)

[Nik Faraday]

Имею ввиду, что у вас карта грузится по таймеру, сам таймер запускается внутри условного оператора

if (ok === false) {

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

[Андрей Филимонов]

Nik Faraday, пожалуйста, можно шаблон целиком?

[Nik Faraday]

Скиньте скриншот вашего продукта, где находится карта

[Андрей Филимонов]

Nik Faraday, это сайт spb.gymbalance.ru, внизу

[Nik Faraday]

Андрей Филимонов, Именно скриншот интерфейса, что бы было видно положения ползунка скорллинга

[Андрей Филимонов]

Nik Faraday, так?

[Nik Faraday]

Андрей Филимонов, да. Примерно код будет следующим:

$( window ).scroll(function() {
  if(window.pageYOffset >= 6000) {
    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A2467dfbbd414306f38c00aa9048346ada3bf2ae105b1d1c84eb6a671b54fc5cd&amp;width=100%25&amp;height=300&amp;lang=ru_RU&amp;scroll=false"></script>
  }
});

6000 это примерное положение вашей карты.
В том месте, где вы сделали этот скриншот, нажмите ПРАВОЙ кнопкой мышку КУДА-ТО, и нажмите посмотреть код (Нижний элемент меню). Далее перейдите на вкладку Console (Вторая справа) и там напишите комманду

window.pageYOffset

Эта команда выведет высоту, где отображается ваша карта. Далее, соответственно от этого, подставите то количество пикселей в блок if, а конкретнее сюда, вместо 6000, как это я поставил (Примерно на глаз оценил)

if(window.pageYOffset >= 6000) {

[Андрей Филимонов]

Nik Faraday, Спасибо, но что-то не работает. Так вставил:


в консоли встретил такое, связанное с новым скриптом:

[Nik Faraday]

Андрей Филимонов, этот скрипт, на котором ошибка, должен быть одной строкой

[Андрей Филимонов]

Nik Faraday, он одной строкой, вставлен скопированный с рабочего варианта:

оставил вставленным сейчас, чтобы смогли посмотреть

[Nik Faraday]

Андрей Филимонов, это странно, попробуйте закинуть в другой скрипт. Почему у вас нет подсветки синтаксиса? Может что-то не так подключили?

[Андрей Филимонов]

Nik Faraday, закинул в рабочий

это не помогло
Код внутри страницы Вордпресса, в редакторе нет подсветки.
Другие скрипты исполняются, в коде страницы видно.
А что ещё нужно подключать?

[Nik Faraday]

Нужно jQuery ещё подключить

[Андрей Филимонов]

Nik Faraday, в футере подключено так

[Nik Faraday]

Андрей Филимонов, засуньте его в . На счёт того, куда именно - я не могу сказать точно, т.к. я не знаю, что у вас может быть подключено в и за что оно отвечает. Я когда сам игрался, недавно с плагином jQuery, наигрался с тем, в каком порядке его подключать.
Так куда этот jQuery подключить в head? В то место, где НИЧЕГО не сломается)

Для проверки пропишете где-то в скриптах $(windows).ready(() => {}) (Прям скопируете и закинете) и посмотрите консоль браузера. У вас НЕ должно быть ошибки, связанной с знаком доллара $