常见的页面加载动画实现方法

加载动画js方法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            #wrapper {
                background: #fff;
                opacity: 1;
                position: fixed;
                z-index: 10;
                top: 0px;
                width: 100%;
                height: 1600px;
            }
            
            #loader {
                background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff;
                width: 200px;
                height: 200px;
                margin: 300px auto;
            }
        </style>
        <script>
            window.addEventListener("load", function() {
                var wrapper = document.getElementById("wrapper");
                document.body.removeChild(wrapper);
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="loader"></div>
        </div>
        <span>动画加载完毕</span>
    </body>

</html>

原生js的load方法，没有依赖。

加载动画jq方法

1.使用setTimeout方法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wrapper {
                position: relative;
                height: 100%;
                width: 100%;
            }
            
            #loader-wrapper {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1000;
                background: #fff;
            }
            
            #loader {
                background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff;
                display: block;
                position: relative;
                left: 50%;
                top: 50%;
                width: 200px;
                height: 200px;
                margin: -100px 0 0 -100px;
                z-index: 1001;
            }
            
            .loaded #loader {
                opacity: 0;
            }
            
            .loaded #loader-wrapper {
                visibility: hidden;
            }
        </style>

    </head>

    <body>
        <div class="wrapper">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
            <span>动画加载完毕</span>
        </div>
        <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                setTimeout(function() {
                    $('.wrapper').addClass('loaded');
                }, 3000);
            });
        </script>
    </body>

</html>

模拟动画效果（没什么卵用）

2.使用load方法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .loader {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat rgb(249, 249, 249);
            }
        </style>

    </head>

    <body>
        <div class="loader"></div>
        <span>动画加载完毕</span>
        <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(window).load(function() {
                $(".loader").fadeOut("slow");
            })
        </script>
    </body>

</html>

监听网页加载效果（不精准）

tip：动画效果实现方法

1.gif图片

2.svg图片（推荐）

3.css3动画（推荐）

以上方法并不能真正的获取页面加载进度信息。

接近真正的获取页面加载进度的方法

使用pace.js插件，监听元素加载，监听ajax请求。此插件原理是搜索页面的元素、请求，利用（ajax）document.readyState来获取进度信息。（推荐）

PS:如果网页使用了预加载或者懒加载技术的话,进度条的信息也是不真实的。

来源：https://www.cnblogs.com/Sroot/p/5772398.html

标签

动画