Блог

Главная - Вопросы по программированию - Есть ли способ показать анимацию загрузки до тех пор, пока страница не будет полностью загружена?

Есть ли способ показать анимацию загрузки до тех пор, пока страница не будет полностью загружена?

#javascript #html #css

Вопрос:

Я развернул свой веб-сайт в netlify, но на веб-сайте отображается только HTML, пока он не завершит загрузку… Есть какие-нибудь советы о том, как сделать так, чтобы веб-сайт отображался только после его полной загрузки?

Я создал свою собственную анимацию загрузки, но я не знаю, как это сделать.

Ответ №1:

Используйте Window: событие загрузки.

Событие загрузки запускается, когда загружается вся страница, включая все зависимые ресурсы, такие как таблицы стилей и изображения.

Проверьте приведенный ниже пример для справки.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #loader {
      height: 100vh;
      width: 100%;
      background-color: black;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
    }

    #loader img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 30%;
    }
    </style>

    <title>The Loader</title>
  </head>
  <body>
    <!-- Div for loader placement -->
    <div id="loader">
      <img src="loader.gif" />
    </div>

      <div>
        <span>We'll answer you soon!</span>
      </div>
    </section>

<script>

  //hide the loader after page is loaded fully
  var loader = document.getElementById("loader");
  window.addEventListener("load", function () {
    loader.style.height = "100%";
    loader.style.width = "100%";

    loader.style.borderRadius = "50%";
    loader.style.visibility = "hidden";
  });

</script>
  </body>
</html>

Ответ №2:

Итак, я написал это несколько часов назад, а затем серверы вышли из строя

 <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <style>
    .main {
      visibility: hidden
    }
  </style>
  <script>
    window.addEventListener("load", function() {
      document.getElementById("animation").style.display = "none";
      document.getElementById("main").style.visibility = "visible";

    })
  </script>
</head>

<body>
  <div id="animation">img src="animated.gif" /></div>
  <div id="main">
    Rest of the site
  </div>
</body>

</html>
Метки: , ,