預加載器在頁面後面開始

我的網站出了問題。我添加了一個預加載器，它假設在頁面之前加載，但實際上它在整個頁面後開始幾毫秒，所以它給出了一個非常不愉快的效果（頁面顯示一毫秒，並且預加載器失去了它的主要目的）。預加載器在頁面後面開始

到目前爲止，我的代碼如下（這是一個WordPress的網站）：HTML

<body> 
<header>Stuff in the header</header> 
    <div class="loader-wrapper"> 
     <div class="loader"></div> 
     <div class="loader-section section-left"></div> 
     <div class="loader-section section-right"></div> 
    </div> 
</body>

JQUERY：

$(document).ready(function() { 
    setTimeout(function(){ 
     $('body').addClass('loaded'); 
    }, 3000); 
    var carousel = $("#carousel").flipster({ 
     style: 'carousel', 
     spacing: -0.3, 
     nav: false, 
     buttons: true, 
     scrollwheel: false, 
    }); 
    $(".rotator").rotator(); 
});

更新：

CSS：

.loader-wrapper, .rotator { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    } 
    .loader { 
    display: block; 
    position: relative; 
    left: 50%; 
    top: 50%; 
    width: 150px; 
    height: 150px; 
    margin: -75px 0 0 -75px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: #8DC63F; 
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
    z-index: 1001; 
    } 
    .loader:before { 
    content: ""; 
    position: absolute; 
    top: 5px; 
    left: 5px; 
    right: 5px; 
    bottom: 5px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: #8DC63F; 
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
    } 
    .loader:after { 
    content: ""; 
    position: absolute; 
    top: 15px; 
    left: 15px; 
    right: 15px; 
    bottom: 15px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: #8DC63F; 
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
    } 
    @-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(0deg); /* IE 9 */ 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    100% { 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    } 
    @keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(0deg); /* IE 9 */ 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    100% { 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    } 
    .loader-wrapper .loader-section { 
    position: fixed; 
    top: 0; 
    width: 51%; 
    height: 100%; 
    background: white; 
    z-index: 1000; 
    -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */ 
    -ms-transform: translateX(0); /* IE 9 */ 
    transform: translateX(0); /* Firefox 16+, IE 10+, Opera */ 
    } 
    .loader-wrapper .loader-section.section-left { 
    left: 0; 
    } 
    .loader-wrapper .loader-section.section-right { 
    right: 0; 
    } 
    .loaded .loader-wrapper .loader-section.section-left { 
    -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ 
    -ms-transform: translateX(-100%); /* IE 9 */ 
    transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ 
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    } 
    .loaded .loader-wrapper .loader-section.section-right { 
    -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ 
    -ms-transform: translateX(100%); /* IE 9 */ 
    transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ 
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    } 
    .loaded .loader, .loaded .rotator { 
    opacity: 0; 
    -webkit-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    } 
    .loaded .loader-wrapper { 
    visibility: hidden; 
    -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ 
    -ms-transform: translateY(-100%); /* IE 9 */ 
    transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ 
    -webkit-transition: all 0.3s 1s ease-out; 
    transition: all 0.3s 1s ease-out; 
    } 
    .loaded .rotator { 
    visibility: hidden; 
    -webkit-transition: all 0.3s 0.3s ease-out; 
    transition: all 0.3s 0.3s ease-out; 
    } 
    .no-js .loader-wrapper { 
    display: none; 
    } 
    .no-js h1 { 
    color: #222222; 
    }

你可以看到這個pa ge在這個地址的行動： http://larchedev.com/pip/

任何提示？

來源

2017-04-21 Matto

這並不完全清楚，與本網站提供的代碼，問題是什麼。請包括在問題本身中將問題複製爲[mcve]所需的任何代碼，而不僅僅是在第三方網站上。 –

我用網站來更好地展示問題。我添加了CSS以查明我正在使用的效果 – Matto

爲了使其正常工作，你需要添加造型如下面給出的，

body { 
    visibility: hidden; 
} 
.loader-wrapper { 
    z-index: 99; 
    display: block; 
}

然後在窗口負載，

$(window).load(function() { 
    $('.loader-wrapper').hide(); 
    $('html, body').css('visibility', 'visible'); 
});

來源

2017-04-21 14:53:53

出於某種原因，window.load不起作用。我在控制檯中發現錯誤： jquery.min.js：4 Uncaught TypeError：a.indexOf不是函數 – Matto

預加載器在頁面後面開始

回答

相關問題