Почему при длительной загрузке сайта, не пропадает preloader?

Question

[ForSureN1]

Добрый день. Имеется сайт на котором установил собственный preloader, то есть создал событие window.onload, которое при срабатывание скрывает прелоадер и т.п. Так вот, на этом прелоадере есть анимация появления текста, и я подвесил на эту анимацию событие animationend, внутри window.onload, но по непонятной мне причине, когда мы страница загружается дольше длительности анимации, скрипт ломается, из за того что анимация кончилась, но страница все еще грузится, тогда прелоадер остается на месте, и не скрывается.

let preloader = document.querySelector('.preloader')
if(preloader) {
  window.onload = function () {
    let preh = document.querySelector('.preh1')
      preh.addEventListener('animationend', () => {
        preh.classList.add('hidden')
        preloader.classList.add('disabled');
        setTimeout(() => { preloader.hidden = true;}, 3000)
          window.setTimeout(function () {
            dropItem();
          }, 1000);
      })
  }
}

P.S. Если я правильно понял, то нужно использовать callback функцию, или нет ? вообще странно все это

Answer 1

[ForSureN1]

Решил самостоятельно, вдруг кому понадобится:

let preloader = document.querySelector('.preloader')
let preh = document.querySelector('.preh1')
let onload = false
let animation = false
if(preloader) {
  preh.addEventListener('animationend', () => {
    animation = true
    endPreloader()
  })
  window.onload = function () {
    onload = true
    endPreloader()
  }
}

function endPreloader() {
  if(onload && animation) {
    preh.classList.add('hidden')
    preloader.classList.add('disabled');
    setTimeout(() => { preloader.hidden = true;}, 3000)
    window.setTimeout(function () { dropItem(); }, 1000);
  }
}