Question

这是我的网站：http://themescreators.com/seven-host/

我正在使用自定义加载效果，由于某种原因它无法正常工作。

这是加载效果使用的代码：

HTML：

<div class="loadingContainer">
   <div class="loading">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
   </div>
</div>

CSS：

.loadingContainer {
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  z-index: 1000;
}
.loadingContainer .loading {
  display: inline-block;
  text-align: center;
}
.loadingContainer .loading > div {
  background-color: #21242e;
  height: 80px;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.loadingContainer .loading .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.loadingContainer .loading .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.loadingContainer .loading .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.loadingContainer .loading .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.loading i {
  width: 52px;
  height: 60px;
  position: absolute;
  left: 50%;
  margin-left: -21px;
  top: 50%;
  margin-top: -30px;
  font-size: 60px;
  display: inline-block;
}

JS：

  jQuery(window).load(function(){
    jQuery('.loadingContainer').css({'opacity' : 0 , 'display' : 'none'});
  });

在Safari中，加载页面后不会删除“.loadingContainer”，因此您只能看到所有页面空白。有人可以帮我解决这个问题吗？

Answer 1

尝试使用以下

替换jQuery(window).load(function(){

$(document).ready(function() {
    // Fadeout the screen when the page is fully loaded
    $('.loadingContainer').fadeOut();
});

据我所知，没有必要在代码中指定jquery。在我的示例中，jquery将自动处理fadeOut()处理程序。其余的代码可以由核心Javascript处理。我也在我的网站上使用这个代码，它在每个操作系统（甚至是android）上都能完美运行。

Answer 2

我无法重现您的问题。也许你删除了＃34; loadingcontainer＆＃34;来自您的网站？

要说明您的代码，您需要定义＆＃34; stretchdelay＆＃34;动画。

@keyframes stretchdelay {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes stretchdelay {
    from {opacity: 0;}
    to {opacity: 1;} 
}

网站无法在Safari浏览器中正确加载

2 个答案: