使用 jQuery 仅显示一次预加载页面

Question

我正在构建一个具有加载页面的网站，该页面在加载页面时会显示一个简短的加载栏动画。但是，我发现只要单击 HTML 页面就会播放。我只想在用户首次进入页面和刷新页面时显示加载动画！我可以设置一个 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;
}

Answer 1

您可以使用 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);
 }

使用 jQuery 仅显示一次预加载页面

Show preloading page only once with jQuery

javascript

jquery

preload

jquery-animate