Как сделать 30 секундную заглушку

#javascript #html #css

Здравствуйте. 

Скажите, пожалуйста, как сделать чтобы при переходе на определенную страницу сначала
была заглушка на 30 секунд, а затем она сама закрывалась и видно было содержание страницы? 

Дело в том, что у меня сайт поиска авиабилетов.
При нажатии кнопки найти, пользователя перебрасывает на поддомен, где и происходит
поиск билета. Поиск длится приблизительно 30 секунд, но во время поиска сразу видны
постепенно найденные авиабилеты. Проблема в том, что сначала по произведению поиска
появляются билеты подороже, а в завершении поиска дешевле. Пользователь вначале видит
дорогие билеты и уходит не дождавшись окончания поиска. 

Заглушка бы дала понять что поиск идет и не показывала бы сразу дорогие билеты. 

Заранее спасибо.
    

Ответы

Ответ 1









LOADING .... (можно вставить картинку с анимацией)



  
My Website !!!






Ответ 2

Не лучший вариант, конечно, но если вам действительно надо показывать заглушку, то:


При открытии страницы сразу показываете заглушку
Устанавливаете функцию для скрытия этой заглушки через setTimeout


Но с таким UX вашу страницу будут закрывать 95% пользователей, потому что 30 секунд
никто ждать не будет. Необходимо показывать сразу то, что нашлось и постепенно подгружать
остальные варианты, которые требуют больше времени для обработки. Посмотрите, как делает
тот же SkyScanner на странице поиска билетов.


Ответ 3

delay setting in animtion-delay



* {
  padding: 0;
  margin: 0;
  font-size: 130%;
}

.none {
  position: fixed;
  left: 0;
  top: 0;
  background-color: #aaa;
  width: 100vw;
  height: 100vh;
  -webkit-animation: test .5s forwards;
  animation: test 1s forwards;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

@-webkit-keyframes test {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100vw);
    transform: translateY(-100vw);
  }
}

@keyframes test {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh);
  }
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ac justo vitae orci consequat pretium ac at tortor. Suspendisse lacus nunc, laoreet
nec ante vel, iaculis lacinia massa. Cras tempor quam dolor, vel tempus purus viverra
eget. Etiam malesuada,
  turpis eu varius molestie, est leo sagittis lacus, non tristique eros lorem ac
mi. Morbi est leo, tincidunt a pretium nec, sagittis quis urna. Pellentesque viverra
libero id sagittis tempor. Pellentesque vel tempor urna.


Ответ 4

Что-то разогнался с наглядностью, ну да ладно:



let result = document.querySelector('#result'),
    data = [{
        ticket: 1,
        price: 500
      }, {
        ticket: 2,
        price: 150
      }, {
        ticket: 3,
        price: 50
      }
    ];

// Просто очищаем нашу область просмотра
document.querySelector('#clearBtn').addEventListener('click', _ => result.innerHTML
= '');

// Загрузка с лоадером
document.querySelector('#searchLoaderBtn').addEventListener('click', _ => {
  // Простейший таймер, вызывает функцию каждые N ms, пока не остановишь
  let timer = {
    _timerId: null,
    start: (fn, time) => this._timerId = setInterval(_ => fn(), time),
    stop: _ => clearInterval(this._timerId)
  };

  // Вставляем лоадер
  let loader = document.createElement('span');
  loader.id = 'loaderView';
  loader.innerHTML = 'Подождите, может быть загрузится дешевле.';
  result.insertAdjacentElement('afterBegin', loader);
  
  // Запуск таймера
  timer.start(_ => {
    // Анимируем точки
    let dots = loader.innerHTML.match(/\./g).length;
    
    if(dots === 3)
      dots = 1;
    else
      dots++;
      
      loader.innerHTML = loader.innerHTML.replace(/\.+/, '.'.repeat(dots));
  }, 200);
  
  // Отображаем билеты.
  // Как только все загружены, останавливаем таймер и удаляем лоадер
  renderTickets(_ => (timer.stop(), loader.remove()));
});

// То, что Вы просили - заглушка
document.querySelector('#searchStubBtn').addEventListener('click', _ => {
  // Создаём элемент заглушки
  let stub = document.createElement('div');
  stub.id = 'stubView';
  stub.innerHTML = 'Я заглушка';
  result.insertAdjacentElement('afterBegin', stub);
  
  // Как закончим отображать/загружать билеты - удаляем заглушку
  renderTickets(_ => stub.remove());
});

// Самое обычное отображение - для примера
document.querySelector('#searchBtn').addEventListener('click', _ => {
  renderTickets();
});

// Постепенно (эмуляция подгрузки) отображаем билеты и, после отображения последнего,
вызываем функцию
function renderTickets(fn = _ => 1, pointer = 0){
  if(pointer === data.length){
    fn();
    return;
  }
    
  let item = data[pointer];
  result.insertAdjacentHTML('beforeEnd', `
Ticket #${item.ticket}: $${item.price}
`);
  
  setTimeout(_ => renderTickets(fn, ++pointer), 500);
}
#result{
  position: relative;
  width: 300px;
  height: 100px;
  border: 1px solid gray;
}
#loaderView{
  position: absolute;
  bottom: 0;
  border-top: 1px solid blue;
}
#stubView{
  position: absolute;
  top: 0; left: 0;
  width: 300px;
  height: 100px;
  background: gray;
  color: white;
}

|  |  |