как отобразить текстовую карусель при загрузке страницы - PullRequest
Новая
       35

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

0 голосов
/ 26 февраля 2019

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

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

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

1 Ответ

0 голосов
/ 26 февраля 2019

Вот демонстрация идеи пользовательского события.Мы показываем, что страница загружает 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>
...