JavaScript, установить минимальное время отображения loader`a

Question

У меня есть лоудер который исчезает при загрузке всех элементов сайта, но на сайте он служит более как декоративный элемент. Клиент хочет добавить в него минимальное значение(время) отображения лоудера(например 5s), даже если страница уже загрузилась.

Вот код:

window.addEventListener('load', () => {
  const loaderText = document.querySelector('.loader-text');

  loaderText.classList.add('loader-text--hidden')


  loaderText.addEventListener('transitionend', () => {
    if (document.querySelector(".loader-text")) {
      document.body.removeChild(loaderText)
    }
  })
});

body {
  background-color: #222;
  color: #fff;
  font-family: 'Chango', cursive;
}

.loader-text {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  transition: 0.75s, visibility 0.75s;
}

.loader-text::after {
  content: 'Например!';
  font-size: 40px ;
  background: #fff url("../images/bg-loader2.jpg");
  color: transparent;
  -webkit-background-clip: text;
  animation: animate 15s infinite linear alternate;
}

.loader-text--hidden {
  opacity: 0;
  visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="loader-text"></div>
</body>

</html>

К js я новенький, так что хотелось бы разобраться как это можно сделать (литература приветствуется).

Answer 1

Добавьте setTimeout и флаг проверки окончания транзакции

let transitionEnded = false;
let secondsLeft = 0;


const checkLoading = () => {
  if (secondsLeft > 5 && transitionEnded) {
    // Тут обрабатываем состояние загрузки, например прячем лоадер
    document.querySelector('.loader').innerHTML = 'LOADED';
    return;
  }
  setTimeout(checkLoading, 1000);
  secondsLeft++;
}


window.addEventListener('load', () => {
  const loaderText = document.querySelector('.loader');

  loaderText.classList.add('loader-text--hidden')
  checkLoading();

  loaderText.addEventListener('transitionend', () => {
    transitionEnded = true;
  })
});


const handlerClickEndTransition = () => {
    transitionEnded = true;
}

<div class="loader">
  Loading...
</div>

<button onclick="handlerClickEndTransition()">End transition</button>

Answer 2

В общем, благодаря человеку снизу и часу поиска информации, я разобрался как сделать минимальную задержку.

function myLoader() {
  const loaderText = document.querySelector('.loader-text');

  loaderText.classList.add('loader-text--hidden');

  loaderText.addEventListener('transitionend', () => {
    if (document.querySelector(".loader-text")) {
      document.body.removeChild(loaderText)
    }
  })
};

window.addEventListener('load', function(load) {
  window.removeEventListener('load', load, false);
  setTimeout(myLoader, 5000);
}, false);

body {
  background-color: #222;
  color: #fff;
  font-family: 'Chango', cursive;
}

.loader-text {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  transition: 0.75s, visibility 0.75s;
}

.loader-text::after {
  content: 'Решено!:)';
  font-size: 30px;
  background: #fff url("../images/bg-loader2.jpg");
  color: transparent;
  -webkit-background-clip: text;
  animation: animate 15s infinite linear alternate;
}

.loader-text--hidden {
  opacity: 0;
  visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="loader-text"></div>
</body>

</html>

БЛОГ НА HUSL

JavaScript, установить минимальное время отображения loader`a

Ответы (2 шт):