实现网页仿真加载进度loading

页面加载进度一直以来都是一个常见而又晦涩的需求，常见是因为它在某些“重”网页（特别是网页游戏）的应用特别重要；晦涩是因为web的特性，各种零散资源决定它很难是“真实”的进度，只能是一种“假”的进度，至少在逻辑代码加载完成之前，我们都不能统计到进度，而逻辑代码自身的进度也无法统计。另外，我们不可能监控到所有资源的加载情况。

所以页面的加载进度都是“假”的，它存在的目的是为了提高用户体验，使用户不至于在打开页面之后长时间面对一片空白，导致用户流失。

既然是“假”的，我们就要做到“仿真”才有用。仿真是有意义的，事实上用户并不在乎某一刻你是不是真的加载到了百分之几，他只关心你还要load多久。所以接下来我们就来实现一个页面加载进度loading。

准备一段loading的html结构：

    <div class="loading" id="loading">
        <div class="progress" id="progress">0%</div>
    </div>

css样式:

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .loading {
            display: table;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 5;

        }
        .loading > .progress {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>

 //在head中埋点，记录用户进入页面时间
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
            //head 埋点 记录用户进入页面的时间loadingStartTime
            window.loadingStartTime = new Date();
    </script>

    <title>Title</title>
</head>

引入JQuery，实现功能：

 <script src="js/jquery-3.3.1.js"></script>
 <script>
        var $loading = $("#loading");
        var $progress = $("#progress");
        var prg = 0;// 初始化进度
        var timer = 0;
        var now = new Date(); // 记录当前时间
        var timeout = 5000;// 设置5秒的超时时间

        // 使用数组来表示随机数的区间
        progress([80,90],[1,3],100);
        window.onload = () => {
           complete();
        };
        // 超时
        if (now-window.loadingStartTime > timeout) {
              complete();
        } else {
            // 未超时，则等待剩余时间
            window.setTimeout(() => {
                complete();
            },timeout - (now - window.loadingStartTime));
        }


        //模拟进度函数
        function progress(dist,speed,delay,callback) {
            var random_dist = getRandom(dist);
            var random_delay = getRandom(delay);
            var random_speed = getRandom(speed);
            window.clearTimeout(timer);
                timer = window.setTimeout(() => {
                    if (prg + random_speed >= random_dist) {
                        window.clearTimeout(timer);
                        prg = random_dist;
                        callback && callback();
                    } else {
                        prg+= random_speed;
                        progress(random_dist,random_speed,random_delay,callback);
                    }
                    $progress.html(parseInt(prg) + "%");//取整
                    // console.log(prg);
                },random_delay);
        }



        //获取随机数函数求最区间[1] [2]之间的随机数 最小[1] 最大[2]
         function getRandom(n) {
             if (typeof n == "object"){
                   if (n.length > 1) {
                       var times = n[1] - n[0];
                       var offset = n[0];
                       return Math.random() * times + offset;
                   }
             } else {
                 return n;
             }
         }

        // 封装完成进度功能
        function complete () {
              progress(100,[1,5],10,() => {
                 window.setTimeout(()=>{ // 延迟了500毫秒再隐藏loading
                     $loading.hide();
                 },500);
              });
        }


 </script>

哈哈哈，以上就大功告成了，但这只是一个纯粹障眼法的伪loading，我们做事讲究脚踏实地，能实现的实现，不能实现的，为了团队和谐，我们不得已坑蒙拐骗，所以还是脚踏实地去监控资源的加载情况再决定进度条的实际加载情况吧.

文章摘自https://www.cnblogs.com/likar/p/6247951.html
上面这个链接讲解的非常详细

实现网页仿真加载进度loading

猜你喜欢