Как всегда проверять загрузку изображений из массива и после выполнять функцию

Хочу реализовать прелоудер на странице, но не после загрузки страницы, а всегда после выполнения функций. Сами функции отслеживать кажется нет смысла, так как они выполняются быстро, а вот картинки которые загружают эти функции грузят страницу. Хочу чтоб когда шла подгрузка картинок из массива появлялся прелоудер, а после загрузки исчезал. Как это можно реализовать? Страница со скриптом тут - https://euroelectric.kz/konfigurator2

Пробовал делать так

var imgs = document.images,
    len = imgs.length,
    counter = 0;

[].forEach.call( imgs, function( img ) {
    if(img.complete)
      incrementCounter();
    else
      img.addEventListener( 'load', incrementCounter, false );
} );

function incrementCounter() {
    counter++;
    if ( counter === len ) {
        console.log( 'All images loaded!' );
    }
}

А в массивах писал так

...
content_el1.innerHTML = arr
      .filter(([collect, mechtype]) => {
        return (collectValue == collect)
        && (mechTypeValue == "allmax" || mechTypeValue == mechtype)
      })
      .map(([collect, mechtype, href, src, text]) => `
        <a href="${href}" > <div class="varic2">
            <img class="notact2" src="${src}" onload="incrementCounter();"/>
          <div>${text}</div>
        </div></a>
      `).join("");
    

Но работает только при первой загрузке