在Javascript上替换延迟功能

时间:2015-07-25 22:35:46

标签: javascript html

我正在我的页面上加载屏幕,它将覆盖整个屏幕大约10秒钟,然后它会消失到应该在这10秒内加载的主要内容。

它有效,但delay功能显示加载屏幕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>

1 个答案:

答案 0 :(得分:0)

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

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