@777Don777

Не срабатывает скрипт на сайте?

Всем приет. Делаю отложенную загрузку яндекс карт на сайте. На странице размещено два блока. Делаю отложенную загрузку на 2ве яндекс карты так:
Скрипт Блок 1
let map_container = document.getElementById('map_container1');
	
    let options_map1 = {
        once: true,
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map1, options_map1);
    map_container.addEventListener('mouseover', start_lazy_map1, options_map1);
    map_container.addEventListener('touchstart', start_lazy_map1, options_map1);
    map_container.addEventListener('touchmove', start_lazy_map1, options_map1);

    let map_loaded = false;
    function start_lazy_map1() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy1');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data-src');
            console.log('YMAP LOADED');
        }

		
    }


Скрипт Блок 2
let map_container = document.getElementById('map_container2');
	
    let options_map2 = {
        once: true,
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map2, options_map2);
    map_container.addEventListener('mouseover', start_lazy_map2, options_map2);
    map_container.addEventListener('touchstart', start_lazy_map2, options_map2);
    map_container.addEventListener('touchmove', start_lazy_map2, options_map2);

    let map_loaded = false;
    function start_lazy_map2() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy2');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data-src');
            console.log('YMAP LOADED');
        }

		
    }


Блок 1
<div id="map_container1" class="map container-fluid" ><script id="ymap_lazy1" async data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Adf5d3febc8f9a80afea32d7901acc8f8713619b09224b303a112f49237e987f8&amp;width=730&amp;height=500&amp;lang=ru_RU&amp;scroll=true"></script><div style="clear: both;"></div></div>


Блок 2
<div id="map_container2" class="map container-fluid" ><script id="ymap_lazy2" async data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A94ceef7b79c343cef157c8e7cf8effac5b76811e77efa084a2c606cc3cbd1622&amp;width=730&amp;height=500&amp;lang=ru_RU&amp;scroll=true"></script><div style="clear: both;"></div></div>


Но почему то скрипт работает только на один блок. Подскажите, как переписать скрипты, что бы они срабатывали каждый на свой блок?
  • Вопрос задан
  • 98 просмотров
Решения вопроса 1
@AUser0
Чем больше знаю, тем лучше понимаю, как мало знаю.
Как минимум в обих блоках используется переменная с одним и тем-же именем map_loaded. В пределах одной страницы она общая для обоих функций start_lazy_map1()/start_lazy_map2(). Первая функция выставляет её в true - и вторая функция не будет работать, потому что map_loaded уже равно true.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы