ajax加载提示插件

最新推荐文章于 2021-09-29 11:54:13 发布

huo2song

最新推荐文章于 2021-09-29 11:54:13 发布

阅读量367

点赞数

本文链接：https://blog.csdn.net/huo2song/article/details/82865729

版权

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script type="text/javascript" src="jquery-1.11.0.js"></script>
    </head>

    <body>
        <style>
            #ict-loading-box {
                position: fixed;
                width: 120px;
                height: 120px;
                top: 45%;
                left: 50%;
                margin-top: -60px;
                margin-left: -60px;
                background: rgba(255, 255, 255, 0.75);
                border-radius: 3px;
                text-align: center;
                font-size: 14px;
                color: #666666;
                -webkit-box-shadow: 0 5px 15px 0 rgba(24, 44, 79, .05);
                box-shadow: 0 5px 15px 0 rgba(24, 44, 79, .05);
                display: none;
            }
            
            #ict-loading-box>img {
                width: 80px;
                display: block;
                margin: 0 auto;
            }
        </style>

        <button id="show">点击加载</button>
        <div id="ict-loading-box">
            <img src="ict_loading.svg" /> 加载中
        </div>
        <div id="result"></div>
        <script type="text/javascript">
            function pageLoadTip(time) {
                var islosading = false;
                $(document).ajaxStart(function(e) {
                    islosading = true;
                    setTimeout(function() {
                        if(islosading == true) {
                            $("#ict-loading-box").show('fast');
                        }
                    }, time || 600);
                });

                $(document).ajaxComplete(function(event, xhr, settings) {
                    var status = xhr.status;
                    if(!(status >= 200 && status < 300 || status === 304)) {
                        alert(xhr.statusText);
                    }
                    if(islosading == true) {
                        $("#ict-loading-box").hide('fast');
                    }
                    islosading = false;
                });

            };
            pageLoadTip();
            $("#show").click(function() {
                $("#result").load("微信图片_20180907131337.jpg");
            });
        </script>
    </body>

</html>

huo2song

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax加载提示插件

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&qu
复制链接

扫一扫