Strona nie ładuje się poprawnie w przeglądarce Safari

Question

To jest moja strona www: http://themescreators.com/seven-host/

Używam niestandardowego efektu ładowania iz jakiegoś powodu nie działa dobrze.

Jest to kod używany na efekt ładunkowej:

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'}); 
    }); 

W Safari”. loadingContainer "nie jest remov ed po załadowaniu strony, więc widzisz tylko pustą stronę. Czy ktoś może mi pomóc naprawić to?

Answer 1

spróbować wymienić jQuery(window).load(function(){ z następującym

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

O ile wiem, nie ma potrzeby, aby określić jQuery w kodzie. W moim przykładzie jquery automatycznie obsłuży obsługę fadeOut(). Reszta kodu może być obsługiwana przez rdzeń Javascript. Używam również tego kodu w mojej witrynie i działa bezbłędnie na każdym systemie operacyjnym (nawet na Androidzie).

Answer 2

Nie mogę odtworzyć Twojego problemu. Być może usunąłeś "loadingcontainer" ze swojej witryny?

Aby napisać o swoim kodzie, musisz zdefiniować animację "stretchdelay".

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