如何在加载整个html页面之前显示加载gif

Question

我有一个通过HTML和CSS非常密集的网页，这导致一些元素加载比用户访问页面时更快。 背景可能需要一段时间才能加载，等等......看到它全部按元素加载会变得非常难看......

所以我想知道如何首先加载一个不同的页面（page1，只有一个gif和简单的html）然后page2（带有密集的html的页面）将出现在客户端的浏览器已经获取所有页面html之后。

我相信这可以用JQuery来完成，我几乎一无所知......

任何建议将不胜感激，谢谢，

Answer 1

使用以下HTML（在正文的顶部是最好的）：

<div id="loading"></div>

这个CSS：

#loading {
    background: url('spinner.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}

以下JavaScript（使用jQuery）：

function hideLoader() {
    $('#loading').hide();
}

$(window).ready(hideLoader);

// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);

您可以将样式内联在div而不是样式表中，以便在加载程序之前减少内容闪现的可能性。 此外，您可以使用https://www.askapache.com/online-tools/base64-image-converter/或类似工具将您的GIF转换为基本64 URI，并使用它而不是spinner.gif 。

Answer 2

    <div id="overlay"></div>
<style>
    #overlay {
        position: fixed;
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .hide {
        display: none;
    }
</style>
<script>
    $(window).load(function() {
     $('#overlay').addClass('hide');
    });
</script>

Answer 3

我在Laravel中实现了它按预期工作，

<style>
.loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background-color: #ffffffcf;
        }
        .loader img{
            position: relative;
            left: 40%;
            top: 40%;
        }
</style>

<div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div>

<script>
    window.onload = function() 
    {
        //display loader on page load 
        $('.loader').fadeOut();
    }

</script>