Trang web không tải đúng cách trong trình duyệt Safari

Question

Đây là trang web của tôi: http://themescreators.com/seven-host/

Tôi đang sử dụng hiệu ứng tải tùy chỉnh và vì lý do nào đó nó không hoạt động tốt.

Đây là mã được sử dụng trên các hiệu ứng tải:

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

Trong Safari sự". loadingContainer "không xóa ed sau khi trang được tải, vì vậy bạn chỉ thấy tất cả các trang trống. Ai đó có thể giúp tôi sửa lỗi này không?

Answer 1

Hãy thử thay thế jQuery(window).load(function(){ như sau

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

Theo như tôi biết không có nhu cầu để xác định jquery trong các mã. Trong jquery ví dụ của tôi sẽ tự động xử lý trình xử lý fadeOut(). Phần còn lại của mã có thể được xử lý bởi Javascript lõi. Tôi cũng sử dụng mã này trong trang web của mình và nó hoạt động hoàn hảo trên mọi hệ điều hành (thậm chí là android).

Answer 2

Tôi không thể tạo lại sự cố của bạn. Có lẽ bạn đã xóa "loadingcontainer" khỏi trang web của mình?

Để nói về mã của bạn, bạn sẽ cần xác định hoạt ảnh "stretchdelay".

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