Как остановить экран загрузки и перейти на главную страницу go? - PullRequest
Новая
       21

Как остановить экран загрузки и перейти на главную страницу go?

0 голосов
/ 11 июля 2020

Как мне остановить мой экран загрузки, а затем go на главной странице или на моем веб-сайте?

Также обновите код здесь:

// begin snippet: js hide: false console: true babel: false

// язык: lang- css

.navbar__link {
  position: static;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
  margin: 20px 0;
  border-radius: 10px;
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid #ffffff;
  display: flex;
  text-align: center;
  display: inline-block;
  padding: 20px;
}


}
// you don't need to add class to a tag, it can be selected by following way
.navbar>a {
  text-decoration: none;
  padding: 15px;
}
.header {
  display: flex;
  // make the header take all space of body
  width: 100%;
}
.navbar {
  display: flex;
  // make navbar take all space that remains after the logo
  flex: 1;
  justify-content: center;
  // make the navbar move left side else it will not be in complete middlle
  transform: translate(-100px);
}
* {
  margin: 0;
  padding: 0;
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.logo {
  width: 48px;
  height: 48px;
}
.loading-bar {
  width: 130px;
  height: 2px;
  background: #ffffff;
  margin-top: 22px;
  position: relative;
  overflow: hidden;
}
.loading-bar::before {
  content: '';
  width: 68px;
  height: 2px;
  background: #000000;
  position: absolute;
  left: -34px;
  animation: blackbar 1.5s infinite ease;
}
@keyframes blackbar {
  50% {
    left: 96px;
  }
}

<header>
  <div style="float: left; padding-right: 10px;">
    <a href="/"><img width='200' height='50' src='Icons/logo home.png' /></a>
  </div>
  <div class="navbar" style="justify-content: center;">
    <a href="discovery.html" class="navbar__link">
      <span class="material-icons">whatshot</span>
    </a>
    <a href="profile.html" class="navbar__link">
      <span class="material-icons">person_outline</span>
    </a>
  </div>

  <!-- Loading Screen -->

  <div class="loading-screen">
    <div class="loading-animation">
      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve">  <image id="image0" width="90" height="90" x="0" y="0"
              xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQAAAAAQ03yvAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
          AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAAmJLR0QAAd2KE6QAAAAJcEhZ
          cwAACxMAAAsTAQCanBgAAAAHdElNRQfkBwsBJxoCRYkNAAAAmElEQVQ4y2P4jwAHGEY5w5zzhx2J
          8xPO3n+A4TMq5/CP2vYPFfZMzCCO5XOb4vPf54Bkfv6veT/n9/3/d0CcP3Y15+f+ng/h/OdjOCAL
          5NyzB3GO1Z//+3v+D3l+EOcZmPP4/mME5/n9zyDOc/vnf3/ffz4fxPl+3u753d/nn8/9PP8Awwf5
          Az9kf38oiOE/PBjCbZRDNw4Awv38T7O+5eEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDctMTFU
          MDE6Mzk6MjYrMDM6MDDkTb6MAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA3LTExVDAxOjM5OjI2
          KzAzOjAwlRAGMAAAAABJRU5ErkJggg==" />
          </svg>
      <div class="loading-bar"></div>
    </div>
  </div>

</header>

JS: 

function handlePageLoaded(){
  document.getElementsByClassName("loading-screen")[0].style.display = "none";
}

Обновления будет go под этим:

Обновление 1: Ни один из них не работает: (.

Все 3 ответа, к сожалению, не сработали, по какой-то странной причине перенаправление на страницу не выполняется. Но мы будем продолжать попытки: D!

Обновление 2: все еще не работает. Я пробовал JS и пытался изменить класс на id, но он сломался, поэтому я вернул его в класс: (.

Вы, ребята, можете изменить код, если будете sh тоже.

Обновление 4: Я пробовал все, что они не работают, к сожалению, но я думаю, что это связано с кодом, потому что он не загружается на сайт, он просто зависает при загрузке.

Обновление 5: Обновите код, если хотите увидеть код. По-прежнему не работает: (.

[ИСПРАВЛЕНО]

Ответы [ 3 ]

0 голосов
/ 11 июля 2020

Вы можете обрабатывать страницу, загруженную с помощью window.onload . Мы можем назначить здесь функцию, которая скрывает ваш загрузчик при загрузке страницы. 

window.onload = () => {
    const loader = document.querySelector('.loading-screen');
    loader.style.display = 'none';
}

Или, если вам нужно перенаправить на другую страницу, вы можете сделать это следующим образом 

window.onload = () => {
    window.location.replace("somethingAmazing.html")
}

Если вы хотите, чтобы у него была задержка (допустим, страница загружается быстро, но вы хотите, чтобы ваша анимация занимала 3 секунды, и вы хотите, чтобы она воспроизводилась полностью перед переходом к содержимому), давайте попробуем следующее: 

window.onload = setTimeout(() => {
    window.location.replace("somethingAmazing.html")
}, 3000)

Вы можете измените 3000 на количество миллисекунд, которое вы хотите, чтобы он ждал

0 голосов
/ 11 июля 2020

вы можете сделать следующее:

1.В вашей <body /> разметке: 

<body onload="handlePageLoaded()">
 ...
</body>

2. В вашем javascript файле: 

function handlePageLoaded(){
  document.getElementsByClassName("loading-screen")[0].style.display = "none";
}

Функция handlePagaLoaded будет вызываться, когда страница тела полностью загружена.

Я рекомендую использовать id вместо класса в этом случае для вашего экрана загрузки.

в этом случае функция будет выглядеть так: 

function handlePageLoaded(){
      document.getElementById("loading-screen").style.display = "none";
    }

Вы также можете использовать document.getElementById("loading-screen").style.visibility= "hidden";, потому что ваш «экран загрузки» position исправлен.

Надеюсь, это поможет!

0 голосов
/ 11 июля 2020

Чтобы проверить, полностью ли загружена ваша страница, используйте document.readyState === "complete" или window.onload.

document.readyState имеет три возможных значения: loading, interactive, complete.

loading: документ загружается.

interactive: документ завершен, но изображения, таблицы стилей и фреймы все еще загружаются.

complete: документ полностью загружен включая.

js: 

// check if page is loaded 
if(document.readyState === "complete") {
  // make loading screen go away
  document.getElementById('loading').style.display = none
}

Это не приведет к перенаправлению, но вы должны стараться избегать перенаправления, потому что это увеличит скорость страницы и улучшит общее впечатление от веб-сайт (плюс вид перенаправления поражает цель наличия экрана загрузки).

не забудьте добавить атрибут id к loading-screen div, чтобы вы могли настроить таргетинг на элемент в js.

...