如何在整个HTML页面加载完之前显示加载动画？

Question

我有一个网页，它的HTML和CSS内容相当丰富，这导致当用户访问该页面时，某些元素加载比其他元素快。背景可能需要一段时间才能加载等等...看到所有元素逐个加载变得非常难看...

因此，我想知道如何首先加载不同的页面（page1，只有一个gif和最基本的html），然后仅在客户端浏览器获取了所有页面html后，页面2（具有丰富的html页面）才会出现。

我认为可以使用我几乎不了解的JQuery来完成这个操作...

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

- Ilan Kleiman

---

你可以使用 Blockui 来完成所有工作。 - Wilfredo P

在page1上执行setTimeout(function() { window.location = 'page2.html' }, 10000);即可解决问题。 - adeneo

<div id="loading">正在加载内容</div><div id="realbody"></div>，然后使用jQuery的.load()方法将真正的内容加载到#realbody中，并在完成后隐藏#loading。 - Marc B

如果您的页面由于HTML和CSS的数量而需要很长时间才能加载，您可能需要重新考虑首先要做什么。 - Zarathuztra

@Zarathuztra 实际上只需要1-4秒的时间，但我更希望它看起来运行得更加流畅。 - Ilan Kleiman

你可以使用Lazyload来加载图片。 - Millhorn

Answer 1

请在HTML代码中添加以下内容（最好放在body标签的顶部）：

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

以下是使用jQuery编写的JavaScript代码：

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 转换为 base64 URI，并使用它来替代 spinner.gif。

- Toothbrush

---

@Shortland 嗯，加载进度条之前是无法显示进度条的 :) - XCS

@Cristy 在他添加 jQuery 之前我发表了评论，然后被删除了。 - Ilan Kleiman

谢谢，这个很好用。我也会研究一下使用base64编码处理图片。 - Ilan Kleiman

同时阅读：如何使用jQuery显示页面加载时的加载图像 - Fefar Ravi

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>

- Lucky Soni

---

此题与另一个答案几乎相同。 - Zarathuztra

@Zarathuztra我从未看到过那个..只有2分钟的间隔..可能是我们同时写作.. - Lucky Soni

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>

- AmarjaPatil4