在等待数据时触发JavaScript加载程序

我正在尝试添加一个加载器到我的网站，这应该是可见的，而网页是“加载”

加载时间约为6.8秒（等待6.3秒，下载0.4秒）。我希望我的加载器在整个6,8秒钟内都可见，但现在，它只是在最后几秒钟显示出来

这是我的密码： HTML:

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

以下是我的网站链接：

如何使

tpa预加载程序在整个6,8秒内可见，即从加载过程的一开始就可见

提前谢谢
 与大多数语言一样，JS也使用序列访问。我想说：

将加载程序代码放在html页面的顶部。
加载库。然后：




//初始化预加载程序
//在此脚本之后，将所有其他。。。。
//然后使用window.onload并在底部放置一些
//设置超时（4-6秒），然后计时器将触发func hide预加载程序。。。

您应该在示例中添加更多代码。这并不是OP问题的好答案，尽管这是个好主意。：）不，您没有实现有效的代码。你列出了一个可能的解决方案，但这是不同的。使用实际代码更新示例，例如您正在谈论的
设置超时
，或者隐藏
预加载程序
：）我必须同意@ThomasDarvik。作为JavaScript的初学者，我很难理解你的建议。你们能再解释一下吗？当我有时间的时候，我会改进答案的！
#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%;
}

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

 <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>