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

273

23 марта 2017, 21:20

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

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

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

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

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

Answer 1

<!DOCTYPE html> 
<html> 
<title></title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<body> 
 
 
<div class="loading"> 
LOADING .... (можно вставить картинку с анимацией) 
</div> 
 
<div class="content" style="display:none"> 
  <h1>My Website !!!</h1> 
</div> 
<script> 
 
function func() { 
  $(".content").show(); // включаем контент 
  $(".loading").hide(); // выключаем сообщение "загрузки" 
} 
 
setTimeout(func, 5000); // 5 секунд "заглушка" 
</script> 
</body> 
</html>

Answer 2

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

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

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

Answer 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); 
  } 
}

<div class="none"></div> 
<div class="container">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.</div>

Answer 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', `<div>Ticket #${item.ticket}: $${item.price}</div>`); 
   
  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; 
}

<input type='button' id='searchLoaderBtn' value='Загрузить с значком загрузки' /> | <input type='button' id='searchBtn' value='Загрузить "как есть"' /> | <input type='button' id='searchStubBtn' value='Загрузить с заглушкой' /> | <input type='button' id='clearBtn' value='Очистить' /><hr /> 
<div id='result'><span></span></div>