プリローダーJavaScript

プリローダーを作成しようとしていますが、現在このコードがありますが、ページが読み込まれる前にプリローダーが表示されていません。プリローダーJavaScript

$(document).ready(function(){ 
     $(".preloader-wrapper").show(); 
     $("body").hide(); 
    }); 

$(window).load(function(){ 
    $(".preloader-wrapper").fadeOut("slow", function(){ 
    $("body").fadeIn("slow"); 
    }); 
});

編集：入手しました。

setTimeout(function() { 
    $('#preloader').fadeOut('slow', function() { 
    $(this).remove(); 
    }); 
}, 2000); 

#preloader { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; 
}

出典

2016-05-10 will0956

何あなたのHTMLは次のように見えますか？あなたは体を隠しているので、JSFiddleまたはスタックスニペットをhttps://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ –

に設定できますか？ – epascarello

あなたは.preloader-wrapperがデフォルトとして表示されるように設定すべきである - このためにCSSを使用しています。

例：

.preloader-wrapper { 
    display: block; 
}

また、あなたは<body>タグの外に何かを置くべきではありませんので、これはあなたがJSを使用して身体を隠してはならないことを意味します。

削除：

$(document).ready(function(){ 
    $(".preloader-wrapper").show(); 
    $("body").hide(); 
});

変更し、あなたのコードの2番目の部分に：

$(window).load(function(){ 
    $(".preloader-wrapper").fadeOut("slow"); 
});

出典

2016-05-10 18:46:38

だから私は彼がそのコードを削除すべきだと書いたのです。 –

これは[this]（http://i.imgur.com/t7lukgn.gifv）です。どのようにページ全体に集中させることができますか？私もそれをしたいです** ** gifのようにページを移動しないでください – will0956

うまく動作するように見えますが、何か不足していますか？ –

問題の一つは、あなたはおそらく.preloader-wrapper

出典

2016-05-10 18:48:26

を含んで体全体を、隠しているということです

最初に読み込ませて上に置くことができます。その後、DOMがロードされた後にそれを削除してください。

setTimeout(function() { 
 
    $('#preloader').fadeOut('slow', function() { 
 
    $(this).remove(); 
 
    }); 
 
}, 2000);

#preloader { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 999; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: visible; 
 
    background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="preloader"></div> 
 
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>

出典

2016-05-10 18:49:38 Neoaptt

ありがとう！それはうまくいった！それはちょうど今中心しません... [編集]（http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally）（最初の答え） – will0956

また、私はそれをしたいページの読み込みまでボディを隠すことはありません – will0956

答えて

関連する問題