프리 로더 나는 내 웹 사이트에 문제가있어 오른쪽 페이지

후 시작합니다. 나는 페이지 전에로드 가정한다 프리 로더를 추가하지만 (페이지는 밀리 초 동안 표시되며 프리 로더는 자신의 주요 목적을 상실) 정말 불쾌한 효과를 제공하므로 실제로는, 전체 페이지 후 몇 밀리 초를 시작합니다. 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; 
    }

지금까지 내 코드는 (그것은 워드 프레스 웹 사이트) 다음이다 이 펜실바니아 볼 수 있습니다. GE는이 주소에서 행동 : http://larchedev.com/pip/

어떤 힌트? 아래로

출처

2017-04-21 Matto

, 스타일을 추가해야합니다, 무슨 문제 야. 제 3 자 사이트뿐만 아니라 질문 자체에 [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 catch되지 않은 형식 오류를 : a.indexOf는 함수가 아닙니다 – Matto

프리 로더 나는 내 웹 사이트에 문제가있어 오른쪽 페이지

답변

관련 문제