前端小课堂-页面加载等待动画

页面加载等待动画

当页面内容比较复杂时，页面内容需要较长的加载时间，用户在页面加载时长时间等待时，加入一些动画效果可以有效提高用户体验，这次为大家带来前端页面加载等待动画的加入过程和原理，为大家提供动画库，帮助大家了解设计方式。

1.页面加载动画原理

浏览器在进行页面加载时是按照文档从上到下加载的，部分在网页前面定义的内容会首先被加载；因此，我们可以把页面加载动画相关的内容写在页面最前面，保证页面加载时首先出现，当内容全部被加载后，使动画内容隐藏

2.书写动画

首先需要把动画内容写入页面，放在页面的最前面，并且设置宽度和高度与背景颜色，使动画能够覆盖整个页面

.loader{
        position: absolute ;
        background-color: white;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    .scanner span {
            color: transparent;
            font-size: 1.4rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -5em;
    }
    .scanner span::before {
        content: "Loading...";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-right: 4px solid #6d11a7;
        overflow: hidden;
        color: #6d11a7;
        animation: load91371 2s linear infinite;
    }

    @keyframes load91371 {
        0%, 10%, 100% {
                width: 0;
        }

        10%,20%,30%,40%,50%,60%,70%,80%,90%,100% {
            border-right-color: transparent;
        }

        11%,21%,31%,41%,51%,61%,71%,81%,91% {
            border-right-color: #6d11a7;
        }

        60%, 80% {
            width: 100%;
        }
    }

    <div class="loader">
        <div class="scanner">
          <span>Loading...</span>
        </div>
    </div>

3.使用js监听页面内容加载情况

使用js进行页面加载情况进行监听，当页面加载完成后，对动画进行隐藏

document.onreadystatechange=function(){
    console.log(document.readyState)
}
// 获取动画的dom
let loader = document.querySelector(".loader");
// 页面加载完成事件
window.onload = function () {
    // 加载完成，隐藏动画，显示内容
    loader.style.display = "none";
}

4.优化

完整代码如下，但是不是最优代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .loader{
        position: absolute ;
        background-color: white;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    .scanner span {
            color: transparent;
            font-size: 1.4rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -5em;
    }
    .scanner span::before {
        content: "Loading...";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-right: 4px solid #6d11a7;
        overflow: hidden;
        color: #6d11a7;
        animation: load91371 2s linear infinite;
    }

    @keyframes load91371 {
        0%, 10%, 100% {
                width: 0;
        }

        10%,20%,30%,40%,50%,60%,70%,80%,90%,100% {
            border-right-color: transparent;
        }

        11%,21%,31%,41%,51%,61%,71%,81%,91% {
            border-right-color: #6d11a7;
        }

        60%, 80% {
            width: 100%;
        }
    }
</style>
<body>
    <div class="loader">
        <div class="scanner">
          <span>Loading...</span>
        </div>
    </div>
    <div>
        <img src="https://picsum.photos/1250/650" alt="">
    </div>

    <script>
        document.onreadystatechange=function(){
            console.log(document.readyState)
        }
        // 获取动画
        let loader = document.querySelector(".loader");
        // 加载完成事件
        window.onload = function () {
            // 加载完成，隐藏动画，显示内容
            loader.style.display = "none";
        }
    </script>
</body>

</html>

完成以上两步，该效果就完成了，但是这样并不满足一般需求，如果页面存在大量需要页面最初加载的文件，导致dom加载速度不够快，那么还是需要花费很多等待时间，那么就使用js在页面最前端将.loader加入到页面最前，才能实现更好的效果。

对于js的实现还可以使用document.onreadystatechange函数进行动态追踪，实现进度条效果，详细见：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readystatechange_event

最后，动画效果库推荐给大家：

https://uiverse.io/loaders