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

Question

[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>

Но почему то скрипт работает только на один блок. Подскажите, как переписать скрипты, что бы они срабатывали каждый на свой блок?

Comments

[キム ファイブプラス]

Это какая то хрень. Есть ymaps.ready(init);

Answer 1

[AUser0]

Как минимум в обих блоках используется переменная с одним и тем-же именем map_loaded. В пределах одной страницы она общая для обоих функций start_lazy_map1()/start_lazy_map2(). Первая функция выставляет её в true - и вторая функция не будет работать, потому что map_loaded уже равно true.

Comments

[777Don777]

Благодарю за подсказку. Все получилось. Помимо этого, надо было еще и map_container уникальный прописать