Safari 브라우저에서 웹 사이트가 제대로 로드되지 않음

Safari 브라우저에서 웹 사이트가 제대로 로드되지 않음

제 웹사이트 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에서는 페이지가 로드된 후에도 ".loading Container"가 삭제되지 않으므로 모든 페이지가 공백으로 표시됩니다.누가 이것 고치는 것 좀 도와줄래?

교환을 시도하다jQuery(window).load(function(){다음과 같이

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

코드에 jquery를 지정할 필요는 없는 것으로 알고 있습니다.이 예에서는 jquery가 자동으로 처리됩니다.fadeOut()핸들러나머지 코드는 핵심 Javascript에서 처리할 수 있습니다.제 웹사이트에서도 이 코드를 사용하고 있는데, 모든 운영체제(안드로이드도)에서 완벽하게 동작합니다.

나는 너의 문제를 재현할 수 없다.혹시 사이트에서 "하역 컨테이너"를 제거하셨습니까?

코드에 대해 설명하려면 "스트레치 딜레이" 애니메이션을 정의해야 합니다.

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

언급URL : https://stackoverflow.com/questions/30358211/website-doesnt-load-properly-in-safari-browser