Как сделать Preloader с учетом определённого времени?

Question

[Евгений Карнаухов]

Всем привет, подскажите пожалуйста как сделать Preloader что бы в независимости от того загрузилась страница или нет, но Preloader пропадет только через 20 секунд??
Вот что сейчас у меня есть:

<div id='preloader'>
    <img src="public/Splash_animation.gif" alt="preloader">
</div>

<script>
    $(document).ready(function() {
        $('#preloader').fadeOut(200000);
    });
</script>

вот сайт - https://juliabeytelman.com/

Comments

[Денис]

У вас в коде стоит 200000 мс, что равно 200 сек. Поставьте 20000 мс для 20 сек. В остальном что не работает?

[Евгений Карнаухов]

Денис, я поставил, прелоадер появляеться но его все равно можно прокручивать

Answer 1

[BorisNaumov]

Если я правильно понял, то вам надо, чтобы скролл срабатывал только через 20 секунд? Если да, то надо изначально повесить на html и body overflow: hidden, а через 20 секунд просто вернуть html и body overflow: scroll

CSS:

html, body {
    overflow: hidden
}

JS:

$(document).ready(function() {
    setTimeout(function() {
        $('html, body').css('overflow', 'scroll');
        $('#preloader').fadeOut();
    }, 20000);
});