Как отобразить текстовую карусель при загрузке страницы

Question

У меня есть веб-страница с изображениями. 200 изображений на общую сумму 100 МБ или около того. Я могу загружать их лениво, но я бы хотел попробовать другую технику.

Отобразите экран "индикатор загрузки страницы" во время загрузки изображений за кулисами (чтобы заболеть), но, что более важно, на этом "экране индикатора загрузки страницы" отобразите несколько лозунгов, красиво переходящих друг в друга, чтобы занять пользователя,

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

Answer 1

Вот демонстрация идеи пользовательского события. Мы показываем, что страница загружает div, и ждем пользовательского события, в демоверсии это только вызвано setTimeout. Но это дает вам принцип работы.

document.addEventListener('DOMContentLoaded', () => {

  document.addEventListener('PageIsLoaded', pageLoaded);
  
  // dummy (this would actually be called when images are loaded)
  setTimeout(() => {
    console.log('loaded');
    document.dispatchEvent(new CustomEvent('PageIsLoaded'));
  }, 3000);

});

function pageLoaded() {
  document.querySelectorAll('div').forEach(d => d.classList.toggle('hide'));
}

.hide {
  display: none;
}

<div class="loading">The page is loading</div>
<div class="loaded hide">The page has loaded</div>