Preloader JavaScript

Я пытаюсь сделать preloader, у меня есть этот код, но он не показывает preloader до загрузки страницы.Preloader JavaScript

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

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

EDIT: Got it.

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(); 
});

Изменение второй кусок кода, чтобы:

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

источник

2016-05-10 18:46:38

Вот почему я написал, что он должен удалить этот код. –

Сейчас он [это] (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

Спасибо! Это сработало! Он просто не будет центрировать сейчас ... [EDIT] (http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) (первый ответ) – will0956

Он также не будет скрывать тело до загрузки страницы, что я хочу сделать – will0956

Preloader JavaScript

ответ

Смежные вопросы