Показать страницу предварительной загрузки только один раз с jQuery - PullRequest
Новая
       15

Показать страницу предварительной загрузки только один раз с jQuery

0 голосов
/ 08 февраля 2020

Я создаю веб-сайт с загрузочной страницей, на которой отображается анимация короткой полосы загрузки во время загрузки страницы. Однако я обнаружил, что это воспроизводится всякий раз, когда нажимается эта страница HTML. Я хочу показывать анимацию загрузки только тогда, когда человек впервые заходит на страницу и когда он обновляет sh страницу! Могу ли я установить атрибут jquery для воспроизведения анимации загрузки только один раз?

Пока это мой код.

jQuery

var width = 100,
  perfData = window.performance.timing,
  EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
  time = parseInt((EstimatedTime/1000)%60)*100;

// Loadbar Animation
$(".loadbar").function() {
  $(this).animate({
    width: width + "%"
  }, time);

  setTimeout(function () {
    $('.preloaderWrap').fadeOut(300);
  }, time);

});

HTML 

<section class="preloaderWrap">
    <div class="percentage"></div>
    <div class="loader">
      <div class="trackbar">
        <div class="loadbar"></div>
      </div>
      <div class="glow"></div>
    </div>
</section>

CSS

.preloaderWrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #000081;
  z-index : 200;
}
.loader,.percentage{
  height: 3px;
  max-width: 200px;
  border: none;
  border-radius: 20px;
  position: absolute;
  top: -25%;
  bottom: 0;
  left: 0;
  right: 0;
  margin : auto;
}
.trackbar {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: #525252;
  text-align: center;
  line-height: 3px;
  overflow: hidden;
  position: relative;
  opacity: 0.99;
}
.loadbar {
  width: 0%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

1 Ответ

1 голос
/ 08 февраля 2020

Вы можете использовать LocalStorage , если он будет установлен для первой загрузки, а затем пропустит код: 

// Loadbar Animation
    var storage = window.localStorage; //set localstorage object in storage var
if(storage.getItem("loading_bar_flag") == 1){
 $('.preloaderWrap').hide();


}else{


  $(".loadbar").animate({
    width: width + "%"
  }, time);

  setTimeout(function () {
    $('.preloaderWrap').fadeOut(300);
  }, time);


   storage.setItem("loading_bar_flag",1);
 }
...