【前端编程-学习-5】系统加载提示

概述

---

在系统加载数据时，可能耗时比较长，此时有一个系统加载的动态图，效果体验比较好，如下图所示：

这是系统加载动态图；

---

jsp界面

---

1. <!--系统加载提示-->
2. <div id="loadBackGround" class="loadBackGround"></div>
3. <div id="loadGif" class="loadGif">
4. <img src="images/loading.gif">
5. </div>

---

动态图保存的路径

---

CCS样式

---

1. /* 系统加载提示 */
2. div.loadBackGround{ width:100%; height:100%; background-color:white; position:absolute; top:0;left:0;z-index:999999999999999;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
3. div.loadGif{position:absolute;top:50%;left:50%; margin-left:-80px; margin-top:-50px;z-index:999999999999999999;}
4. div.loadGif h2{ font-size:14pt; padding-bottom:0px; margin-bottom:0-10px;color:black}

---

加载完毕后

---

1. //系统加载中提示
2. $("#loadBackGround").hide();
3. $("#loadGif").hide();

来自为知笔记(Wiz)

附件列表

• loading.gif

 

转载于:https://www.cnblogs.com/ssslinppp/p/4580594.html