プリローダーがページの後ろから始まる

私のウェブサイトに問題があります。ページの前にロードするプリローダを追加しましたが、実際にはページ全体から数ミリ秒後に開始されるため、実際には不快な効果があります（ページがミリ秒間表示され、プリローダが主な目的を失う）。 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を見ることができますこの住所の実際の行動： 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捕捉されていないTypeError：a.indexOfは関数ではありません – Matto

プリローダーがページの後ろから始まる

答えて

関連する問題