使用Loading页面改善网络延迟带来的用户体验度问题

<!DOCTYPE html>
<html xmlns:th="http:\\www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>付款-处方一码付</title>
    <link rel="stylesheet" href="../lib/css/bootstrap.min.css">
    <script src="../lib/js/jquery-1.12.4.min.js"></script>
    <script src="../lib/js/bootstrap.min.js"></script>

</head>
<body>

<style>
    img {
        height: auto;
        width: auto \9;
        width: 100%;
    }
</style>

<div>
    <input type="hidden" text="text" readonly id="BillSign" value="U0218912" th:value="${BillSign}" th:placeholder="${BillSign}" >
</div>

<div style="margin-top: 30%">
    <img src="../lib/img/loading8.gif" class="Loading">
</div>

<script type="text/javascript">

    $(document).ready(function () {

        function myfun() {
            var i = 2;

            var myVar = setInterval(function () {

                if ( i != 0) {
                    i = i -1;

                    $.post("/aggpay/data/Async",
                        {
                            BillSign: $("#BillSign").val(),
                        },
                        function (data) {
                            console.log("data InputAmount = " + data.InputAmount);
                            console.log("data openid = " + data.openid);
                            console.log("data PatientName = " + data.PatientName);
                            console.log("data BillSign = " + data.BillSign);
                            if (data.statusCode == "0000") {
                                //清除定时轮询
                                clearInterval(myVar);
                                window.location.href = "/aggpay/lay/wxpayconfirm?BillSign=" + data.BillSign
                                    + "&PatientName=" + data.PatientName + "&openid=" + data.openid + "&InputAmount=" + data.InputAmount;
                            }

                        });
                }else {
                    window.location.href = "/aggpay/status/failure?status="+ "处方信息查询失败！" ;
                }

            }, 10000);   //10秒轮询
        }

        window.onload = myfun();
    });
</script>
</body>
</html>
页面加载效果：
在这里插入图片描述
使用Loading页面改善网络延迟带来的用户体验度问题

猜你喜欢
