как настроить страницу загрузки для предварительного просмотра, пока сайт загружается в фоновом режиме

Question

Итак, у меня есть веб-сайт, на полную загрузку которого уходит около минуты. Есть ли способ показать некоторую загрузочную анимацию или изображение, пока веб-сайт загружается в фоновом режиме, чтобы после завершения загрузки изображение перешло на полностью загруженный веб-сайт? Я пробовал использовать <meta http-equiv="refresh" content="1000; url = 'https://websiteurl.com'" />, приблизив время загрузки веб-сайта, но обычно оно значительно различается в зависимости от подключения пользователя rnet.

Answer 1

Вы можете добиться этого с помощью комбинации CSS и jQuery, как показано ниже.

$(function() {
  setTimeout(function() {
    $(".loader").fadeOut(500);
    $(".content").removeClass("loading");
  }, 2000);

});

.content {
  width: 100%;
  height: 100% postion: relative;
  transition: all 2s;
}

.content.loading:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  top: 0;
  left: 0;
  transition: all 2s;
}

.loader {
  border: 16px solid #f3f3f3;
  /* Light grey */
  border-top: 16px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  position: absolute;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="content loading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius tellus eros, ut pretium neque scelerisque ut. Etiam condimentum a quam at elementum. Nunc tempus tempus nunc sit amet aliquam. Pellentesque scelerisque turpis ut mi bibendum vestibulum.
  Morbi in purus vitae mauris efficitur mollis in a elit. Aenean maximus, turpis eget gravida semper, neque nunc sollicitudin orci, non tristique metus mi nec lectus. Integer congue eros eget est rhoncus, quis pharetra ex consectetur. Praesent sollicitudin
  pellentesque tellus, eget efficitur sapien aliquet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce venenatis dapibus velit et porttitor. Etiam quam tortor, iaculis non dignissim at, ultrices ut quam.
  Vivamus lacus diam, commodo at orci quis, tincidunt egestas ex. Nam finibus est tellus, in sodales sapien pulvinar sed. Integer lacus eros, bibendum nec condimentum ac, consequat nec est. Integer vitae urna nec tellus gravida sagittis vel vitae eros.
  Fusce viverra sollicitudin est, eget elementum tortor accumsan sed. Donec nec nunc vel nisl suscipit viverra. Praesent sit amet lorem at ex mattis malesuada at eu metus. In in felis in massa porttitor vulputate. Praesent id ultrices dui.</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader"></div>

Примечание: Это только один способ сделать это.