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

【问题标题】：How can I display a loading gif until an entire html page has been loaded如何在加载整个 html 页面之前显示加载 gif
【发布时间】：2014-04-03 14:51:35
【问题描述】：

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

所以我想知道如何首先加载一个不同的页面（page1，它只有一个 gif 和最少的 html），然后 page2（具有密集 html 的页面）只有在客户端的浏览器获取所有内容后才会出现页面 html。

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

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

【问题讨论】：

您可以使用Blockui。完成所有工作。
在 page1 上做 setTimeout(function() { window.location = 'page2.html' }, 10000); 会解决它。
<div id="loading">loading stuff here</div><div id="realbody"></div>，然后是一些 jquery 到 .load() 的真实身体内容到 #realbody 并在完成后隐藏 #loading。
如果您的页面由于其上的 HTML 和 CSS 数量而需要很长时间才能加载，您可能需要重新考虑一下您一开始在做什么。
@Zarathuztra 实际上是 1-4 秒的问题，我只是想让它看起来运行得更顺畅。

标签： javascript jquery html

【解决方案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 转换为 base 64 URI，并使用它来代替 spinner.gif。

【讨论】：

@Shortland 好吧，在加载进度条之前不能显示进度条:)
@Cristy 我在他添加 jQuery 之前发表了评论，已删除，
谢谢，这很好用，也会用图片查看 base64。

【解决方案2】：

我已经在 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>

【讨论】：

【解决方案3】：

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

【讨论】：

这与其他答案几乎相同
@Zarathuztra 我从来没有看到过……只有 2 分钟的间隔……可能我们俩同时写作……