sito non viene caricato correttamente nel browser Safari

Question

Questo è il mio sito: http://themescreators.com/seven-host/

Sto usando un effetto di carico su misura e per qualche ragione non funziona bene.

Questo è il codice usato sulla effetto di carico:

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

In Safari il". loadingContainer "non è remov dopo che la pagina è stata caricata, in modo da visualizzare solo la pagina vuota. Qualcuno può aiutarmi a risolvere questo problema?

Answer 1

provare a sostituire jQuery(window).load(function(){ con il seguente

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

Per quanto ne so non c'è bisogno di specificare jquery nel codice. Nel mio esempio, jquery gestirà automaticamente il gestore fadeOut(). Il resto del codice può essere gestito dal core Javascript. Uso anche questo codice nel mio sito Web e funziona perfettamente su tutti i sistemi operativi (anche su Android).

Answer 2

Non riesco a riprodurre il problema. Forse hai rimosso il "container di caricamento" dal tuo sito?

Per dire del codice, è necessario definire l'animazione "stretchdelay".

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