Не работает script js в браузере! Точнее вообще ничего не выводит в консоль. Делаю прелоудер для сайта и ничего не меняется

document.addEventListener("DOMContentLoader", () => {

    const mediaFiles = document.querySelectorAll('img');
    let i = 0;

    Array.from(mediaFiles).forEach((file, index) => {
        file.onload = () => {


            if (i === mediaFiles.length)
            {
                preloader.classList.add('preloader--hide')
                percents.innerHTML = 100
            }
        }
    });
});

Это должен быть прелоудер, но ничего в консоли нет, хотя в обучалке там происходит вывод информации о процессе. Вот HTML file:

<!-- Preloader -->
<div id="preloader" class="preloader">
    <div class="preloader__louder">
        <div class="loadingio-spinner-rolling-v1nknrrlkep">
            <div class="ldio-5egqao517kw">
                <div></div>
            </div>
        </div>
        <span class="preloader__percent">
            <span id="percents">0</span>%
        </span>
    </div>
</div>
<!--/Preloader -->

/* Prelouders + all keyframes */ CSS file:

.preloader {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #0E1D29;
}

.preloader__louder,
.preloader__percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.preloader__percent {
    font-family: 'Anek Malayalam', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    letter-spacing: 2px;

}


@keyframes ldio-5egqao517kw {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.ldio-5egqao517kw div {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 10px solid #f9c808;
    border-top-color: transparent;
    border-radius: 50%;
}

.ldio-5egqao517kw div {
    animation: ldio-5egqao517kw 1s linear infinite;
    top: 100px;
    left: 100px
}

.loadingio-spinner-rolling-v1nknrrlkep {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: rgba(255, 255, 255, 0);
}

.ldio-5egqao517kw {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
}

.ldio-5egqao517kw div {
    box-sizing: content-box;
}