JavaScript动态加载效果

最新推荐文章于 2024-06-04 11:29:46 发布

东明之羞

最新推荐文章于 2024-06-04 11:29:46 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript HTML 文章标签：页面加载动画

本文链接：https://blog.csdn.net/qq_28254093/article/details/81628724

版权

JavaScript 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

效果图

1.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width =device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="victor" name="author"/>
    <style>
        #loadDiv {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999;
            background-color: rgba(235, 235, 235, 0.95);
            top: 0px;
        }
            #gif {
                margin: auto;
                margin-top: 30%;
                border: 1px solid #f5f5f5;
                background-color: white;
                width: 86px;
                border-radius: 10px;
            }
			#gifText{
				padding-top: 20px;width:100%;color: #5c5c63;text-align:  center;
			}
    </style>
</head>
<body>
<div>
    <div id="loadDiv">
        <div id="gif">
            <img style="padding: 10px" src="../images/wait.gif" _height="64" _width="64">
         </div>
        <div id="gifText" >
            <div id="loadText">正在验证数据，请稍后！</div>
        </div>
    </div>
</div>
</body>
</html>

2.js

    function LoadDivs(flg) {
        var s = null;
        document.getElementById("loadDiv").style.display = flg == true ? "block" : "none";      

        if (flg) {

            var index = 0;
            var text = ["正在验证数据，请稍后！", "正在连接消息服务器，请稍后！", "正在加载数据，请稍后！"];
            s = setInterval(function () {
                document.getElementById("loadText").innerText = text[index] || "正在验证数据，请稍后！";
                index++;
                if (index > text.length - 1) {
                    index = 0;
                }
            }, 2000);
        } else {
            if (s != null && s != undefined) {
                clearInterval(s);
            }
        }
    }

3.调用

LoadDivs(true);
LoadDivs(false)

4.资源图片

东明之羞

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript动态加载效果

效果图1.html&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;meta name="viewport" content="width =device-width, initial-scale=1" /&gt; &lt;meta http-equiv="Conten
复制链接

扫一扫

专栏目录