javascript - 替代 Javascript 上的延迟函数

Question

我正在我的页面上制作加载屏幕，该屏幕将覆盖整个屏幕约 10 秒，然后淡入应在这 10 秒内加载的主要内容。

它可以工作，但问题是延迟功能显示加载屏幕10秒，并且主要内容在这段时间内没有预加载。我只是淡入内容，然后它开始加载。

如何更改功能，使其在 10 秒的持续时间内加载页面上的主要内容，而不仅仅是显示加载屏幕。

    <script src=‘http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
    $(function() {
        $('<div style="height:100%;width:100%;z-index:1000;background-color:blue;position:absolute;”><br><br><br><center><img src="http://bithumor.co/bh-logo.png" height="100" width="100"></center></div>')
        .insertBefore('body')
        .delay(6000)
        .fadeOut(function() {
          $(this).remove(); 
        });
    });
    </script>

Answer 1

使用超时来异步延迟脚本的一部分和其余脚本。

$(function() {
    var loading = $('<div style="height:100%;width:100%;z-index:1000;background-color:blue;position:absolute;”><br><br><br><center><img src="http://bithumor.co/bh-logo.png" height="100" width="100"></center></div>');
    loading.insertBefore('body');
    window.setTimeout(function(){
        loading.fadeOut(function() {
            $(this).remove(); 
        });
    },10000); // 10000 milliseconds = 10 seconds
});