Question

在创建布局时，我不会停止预加载器，也不知道有什么问题。它不仅会在Mozilla Firefox（最新版本）和Google Chrome（移动版）中关闭。在Google Chrome的桌面版上，所有功能都像发条一样

完全相同的代码可以在其他项目中完美地工作。

$(window).on('load', function() { /* Preloader */
  $('.preloader').delay(500).fadeOut('slow', function() {
    $(this).attr('style', 'display: none !important');
    $('body').css("overflow", "auto");
  });
});

body {
  overflow: hidden;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  background-color: #fefefe;
}

.cssload-container {
  width: 150px;
  margin: 0 auto;
}

.cssload-circle-1 {
  height: 150px;
  width: 150px;
  background: rgb(97, 46, 141);
}

.cssload-circle-2 {
  height: 125px;
  width: 125px;
  background: rgb(194, 34, 134);
}

.cssload-circle-3 {
  height: 100px;
  width: 100px;
  background: rgb(234, 34, 94);
}

.cssload-circle-4 {
  height: 75px;
  width: 75px;
  background: rgb(237, 91, 53);
}

.cssload-circle-5 {
  height: 50px;
  width: 50px;
  background: rgb(245, 181, 46);
}

.cssload-circle-6 {
  height: 25px;
  width: 25px;
  background: rgb(129, 197, 64);
}

.cssload-circle-7 {
  height: 13px;
  width: 13px;
  background: rgb(0, 163, 150);
}

.cssload-circle-8 {
  height: 6px;
  width: 6px;
  background: rgb(22, 116, 188);
}

.cssload-circle-1,
.cssload-circle-2,
.cssload-circle-3,
.cssload-circle-4,
.cssload-circle-5,
.cssload-circle-6,
.cssload-circle-7,
.cssload-circle-8 {
  border-bottom: none;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  animation-name: cssload-spin;
  -o-animation-name: cssload-spin;
  -ms-animation-name: cssload-spin;
  -webkit-animation-name: cssload-spin;
  -moz-animation-name: cssload-spin;
  animation-duration: 4600ms;
  -o-animation-duration: 4600ms;
  -ms-animation-duration: 4600ms;
  -webkit-animation-duration: 4600ms;
  -moz-animation-duration: 4600ms;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}

@keyframes cssload-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-spin {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="preloader d-flex align-items-center justify-content-center">
  <div class="cssload-container">
    <div class="cssload-circle-1">
      <div class="cssload-circle-2">
        <div class="cssload-circle-3">
          <div class="cssload-circle-4">
            <div class="cssload-circle-5">
              <div class="cssload-circle-6">
                <div class="cssload-circle-7">
                  <div class="cssload-circle-8">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我会尝试删除delay（500）和您拥有的其他冗余代码。例如，将样式属性设置为display：none，如果fadeOut已经运行，则不会执行任何操作，因为它将被隐藏。

如果您确实需要，可以使用setTimeout（）延迟某些时间。

setTimeout(function(){
      $('.preloader').fadeOut();
},500);

此处的示例：https://jsfiddle.net/qok75ufv/

预加载器在某些浏览器中不会停止。如何解决这个问题？

1 个答案: