预加载器在页面后面开始

我的网站出了问题。我添加了一个预加载器，它假设在页面之前加载，但实际上它在整个页面后开始几毫秒，所以它给出了一个非常不愉快的效果（页面显示一毫秒，并且预加载器失去了它的主要目的）。预加载器在页面后面开始

到目前为止，我的代码如下（这是一个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

预加载器在页面后面开始

回答

相关问题