layui 中 ajax 请求圆圈载入动画

平时 ajax 请求时响应时间较长会设置一个转圈的载入动画,但是如果再加上数字表示百分比是不是更能减少用户使用中的焦虑呢?效果:

layui 中 ajax 请求圆圈载入动画

以下以一个 ajax 请求为例:

$.ajax({url: "http://cway.top": function (XMLHttpRequest) {
        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']
        });
        start();}, success: function (result) {layer.closeAll();
        stop();}
});

上述在载入动画上加上正在查询的文字跟载入百分比,初始值 0%。其中启动了一个 start() 方法启动定时器,在定时器中对百分比进行增加,我这里是设置每 200ms 增加 5%:

    function show() {$("#loadProgress").text(parseInt($("#loadProgress").text()) + 5);
        if (parseInt($("#loadProgress").text()) >= 95) {stop();
        }
    }

    var timer;// 定义在两个函数外面,因为两个函数都会用到!
    function start() {timer = window.setInterval(show, 200);// 每隔 200ms 调用一次 show 函数
    }

    function stop() {timer = window.clearInterval(timer);
        $("#loadProgress").text(99);
    }

当大于 95% 时停止计时器,并将百分比固定在 99%,如果请求一直没响应那就卡 99 了,不过一般请求一般都不会卡在这,毕竟请求长时间没响应的情况很少。

手机扫描二维码访问

本文标题:《layui 中 ajax 请求圆圈载入动画》作者:极四维博客
原文链接:https://cway.top/post/818.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«    2024年9月    »
1
2345678
9101112131415
16171819202122
23242526272829
30

搜索

控制面板

您好,欢迎到访网站!
  查看权限

最新留言

文章归档

  • 订阅本站的 RSS 2.0 新闻聚合