layui 实现加载动画以及非真实加载进度

近期在做一个网站的查询功能，但是由于数据量确实太大，分页查询后也是很慢，同时查询出的数据部分还要进行一些处理，导致用户说要我们给他们加一个查询进度，要百分比显示。加上加载动画很简单，layui有现成的。但是还要动画。。我tm（手动微笑），原谅我水平比较低。然后就瞎搞，终于搞出了一个加载的进度，虽然还是假的。。。

上面废话有点多，直接切入正题。

首先是html代码。。。。。（不存在的2333333........）

然后是js代码：

    //这里是必须要有的，_index的作用是用来关闭遮罩，详细看layui的文档
    var _index;
    var _lp_baseTime = 0;
    var _lp_startTime = 0;
    function updateLoadProgress() {
        if (_lp_baseTime < 0) {
            layer.close(_index);
            return;
        }
        var dval = parseInt(new Date().valueOf())- parseInt(_lp_startTime);
        var timeDifference = (dval / _lp_baseTime).toFixed(2);
        var lp = timeDifference < 1 ? timeDifference * 100 : 99;
        $("#loadProgress").html(parseInt(lp));
        setTimeout(function () { updateLoadProgress(); return; }, 650);
    }


    function 你的函数(){
    
    $.ajax({
        url:url,
        async:true,
        data:{},
        beforeSend：function(){
            //敲黑板
            _index = layer.load(1, {
                    content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查询(<span id='loadProgress' >0</span>%)</div>",
                    shade: [0.5, '#000']
                });
            //这里是预估的时间，因为整个进度都是根据消耗时间计算的 = =
            _lp_baseTime = Math.abs(new Date(end).valueOf() - new Date(start).valueOf()) / 3600000 * stns.split(',').length * 150;
            _lp_startTime = new Date().valueOf();

           setTimeout(function () { updateLoadProgress(); return; }, 60);
        },
        success:function(){ _lp_baseTime = -1; $("#loadProgress").html("100");layer.close(_index); },
        error:function(){
                _lp_baseTime = -1;
                layer.close(_index);
            }
    });

    }

OK，就是这么多，主要是利用预估的时间与现在已进行时间进行预估做比较，所以实际使用的时候还要进行一定程度的调整，但是，最起码也是个思路是不是233333，参考一下吧

超过时间时进度会定格在99%，所以，emmmm....注意预留一些时间

layui 实现加载动画以及非真实加载进度

猜你喜欢