本帖最后由 Derrick.Jiao 于 2021-8-20 12:03 编辑
相信有很多小伙伴在实际应用中，存在许多需要加载的大文件。在加载大文件的时候，由于浏览器的限制，可能需要花费一些时间，在这个时候需要加Loading这样的遮罩层。能够使得用户知道表单是在加载中，而不是“卡死”的情况，能够有效提升用户体验。当然，我们在v14也推出了增量加载，当导入大文件时建议使用增量加载以帮助优化初始加载时间。
具体效果如下，我们来看下如何实现吧。
首先我们需要提前准备一张loding的gif图，在加载的时候用。并且创建两个DOM，一个是加载的gif图，一个是不允许用户操作表单的遮罩层。
<div class='center' id="load"><img src="./o_loading.gif" alt=""></div>
<div id="ZZ"></div>
对应的样式如下，loding图我们就让他页面居中显示，遮罩层设置一些透明度使其覆盖整个页面。并且两者默认都是不显示。
- .center {
- width: 100px;
- height: 100px;
- text-align: center;
- color: #fff;
- display: none;
- text-align: center;
- }
- #ZZ {
- display: none;
- position: absolute;
- top: 0%;
- left: 0%;
- width: 100%;
- height: 100%;
- background-color: black;
- z-index: 99999;
- -moz-opacity: 0.1;
- opacity: 0.1;
- filter: alpha(opacity=10);
- }
最后就是通过修改css的display属性使其显示或者隐藏。这里之所以用settimeout是因为刷新UI线程不应被js代码执行中断，添加setTimeout以提供浏览器刷新UI的机会。- document.getElementById("ZZ").style.display = "block";
- show(CenterDiv);
- setTimeout(function () {
- spread.fromJSON(data);
- hide(CenterDiv);
- document.getElementById("ZZ").style.display = "none";
- }, 0);
下载附件即可查看完整代码 |
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图