欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript动态加载效果

程序员文章站 2024-03-24 15:43:46
...

效果图

JavaScript动态加载效果

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.资源图片

JavaScript动态加载效果

 

相关标签： 页面加载动画

上一篇： vue+elementUI实现导出excel功能+批量导入功能

下一篇： YuvImage源码分析以及使用

推荐阅读