3

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

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

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

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

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

4
  • 1
    Почему бы не поставить значок загрузки?
    – user207618
    22 мар 2017 в 21:06
  • Значек загрузки как то не очень. Бывает и 40 секундный поиск, если вариантов авиабилетов много, а если ставить значек загрузки, то после 30 секунд может быть виден еще поиск. Я бы конечно прежде чем окончательно отказываться от вашего варианта посмотрел бы на примере. Вдруг это то, что мне нужно. Спасибо.
    – Arcadiy
    22 мар 2017 в 21:11
  • Имхо, наилучший вариант - показывать вновь найденные билеты без цены. Так и юзер будет видеть, что что-то происходит, и высокие цены его не отпугнут. Как я понимаю, даже если бы сначала показывались дешевые билеты, то юзер не смог бы их заказать до окончания полной 30-40 секундной загрузки.
    – br3t
    22 мар 2017 в 21:23
  • @br3t Вы профессионалы, я Вам доверяю. Вот мой сайт aviareysi.ru какое вы видите решение? С уважением.
    – Arcadiy
    22 мар 2017 в 21:28

4 ответа 4

3

<!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>

1
  • Огромнейшее спасибо
    – Arcadiy
    22 мар 2017 в 22:19
1

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

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

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

3
  • Вот мой сайт, посмотрите пожалуйста что можно сделать aviareysi.ru С уважением
    – Arcadiy
    22 мар 2017 в 21:25
  • 2
    Судя по вашему вопросу и комментарию - только отдать в более опытные руки. 22 мар 2017 в 21:28
  • Спасибо за совет. Попытаюсь, может у меня получится самому.
    – Arcadiy
    22 мар 2017 в 21:30
1

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>

1
  • Спасибо большое
    – Arcadiy
    22 мар 2017 в 21:51
1

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

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.