Запускать JavaScript-загрузчик во время ожидания данных

Question

Я пытаюсь добавить на свой сайт загрузчик, который должен быть виден, пока страница «загружается».

Например. время загрузки составляет ок. 6,8 секунды (6,3 секунды ожидания и 0,4 секунды загрузки). Я хочу, чтобы мой загрузчик был виден в течение целых 6,8 секунд, но, как и сейчас, он показывает только последние несколько секунд.

Вот мой код: HTML:

<div id="tpa-preloader"></div>

CSS:

#mk-boxed-layout{ display: none; }

#tpa-preloader{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:url(/preloader.gif) no-repeat #FFFFFF 50%;
    -moz-background-size:148px 128px;
    -o-background-size:148px 128px;
    -webkit-background-size:148px 128px;
    background-size:148px 128px;
    z-index: 99998;
    width:100%;
    height:100%;
}

JavaScript:

function onReady(callback) {
    var intervalID = window.setInterval(checkReady, 1000);

    function checkReady() {
        if (document.getElementsByTagName('body')[0] !== undefined) {
            window.clearInterval(intervalID);
            callback.call(this);
        }
    }
}

function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
    show('mk-boxed-layout', true);
    show('tpa-preloader', false);
});

Вот ссылка на мой сайт: http://nettbutikk -sandbox.ellco.me / produkt / o35 /

Как я могу сделать tpa-preloader видимым на все 6,8 секунды, то есть с самого начала процесса загрузки?

Заранее спасибо!

Answer 1

Как и большинство языков, JS также использует последовательный доступ. Я хочу сказать:

1. Поместите код загрузчика на верхнюю html-страницу. Загрузить библиотеку. Тогда:

   <тело>

    <script>
   
     // Init you preloader
   
     // After this script put all other.... 
   
     // then use window.onload and put on bottom some 
     // setTimeout ( 4-6 sec ) then timer will trigger func hide preloader...
   </script>