关于使用easyui为前端框架，加载表格数据较多时在火狐浏览器会出现表格片段不停闪烁问题的兼容问题解决。

1、项目是可视化管理系统，加载的数据较多，使用谷歌浏览器从登陆界面跳转到主页时还算干净利落，但是使用火狐浏览器时在这一过程中在数据没有加载完毕之前，整个页面就仿佛是在闪烁，可以看到闪烁的是表格字段的片段，这对于用户体验而言并不友善，所以我就开始百度到底是什么原因。最终留意到一个大神写的博客，具体什么记不清楚了，但是大致的问题和我描述的差不多，于是采纳了他的解决办法：

思路：在页面加载之前也就是由登陆界面跳到首页这个过程之间，在首页内容还未完全加载出来之前用一个纯白色背景的盒子将其盖住，这样也就不会给用户看到页面内容不同闪烁的场景；且覆盖的时间是1秒钟，1秒钟过后就去掉这个盒子(使用定时器即可)。恢复首页原本应该有的样子。

实现步骤：

html:

<div id='loadingDiv' class="loadingDiv"><h4>loading.................</h4></div>

js:

以上方法就可以完美解决页面加载时不停闪烁的问题。

2、本来以上方法就可以解决问题了，我想使用户体验更加好些，也就是页面在等待加载的1秒钟时间内不是呆呆的只有一行字在哪里摆着。想到了css3的新型样式，“加载”的动画效果。于是借鉴了网站大神写的关于使用css3实现加载效果的案例，作了一些改动，将两者完美结合，效果还不错。

html：

注：1、loadingDiv：主要是实现哪个遮挡的盒子

2、container：包含的所有元素主要作用是实现加载的动态效果。

css样式：

.container {
margin: 20px;
width: calc(100% - 40px);
height: auto;

}

.loading-anim {
position: relative;
width: 200px;
height: 200px;
margin: auto;
perspective: 800px;
transform-style: preserve-3d;
transform: translateZ(-100px) rotateY(0deg) rotateX(165deg) rotateZ(90deg) scale(0.3); //这个主要是定义加载图案的呈现效果，距离X Y Z有多少度数
opacity: 1; //如果设置为0就完全不显示了
transition: all .2s ease-out;
}
.loading-anim .circle {
width: 100%;
height: 100%;
animation: spin 5s linear infinite;
}
.loading-anim .border {
position: absolute;
border-radius: 50%;
border: 3px solid #000;
}
.loading-anim .out {
top: 15%;
left: 15%;
width: 70%;
height: 70%;
border-left-color: transparent;
border-right-color: transparent;
animation: spin 2.08333s linear reverse infinite;
}
.loading-anim .in {
top: 29%;
left: 29%;
width: 42%;
height: 42%;
border-top-color: transparent;
border-bottom-color: transparent;
animation: spin 1.66667s linear infinite;
}
.loading-anim .mid {
top: 40%;
left: 40%;
width: 20%;
height: 20%;
border-left-color: transparent;
border-right-color: transparent;
animation: spin 1.25s linear infinite;
}

.loading .loading-anim {
transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.3);
opacity: 1;
}

.loading .loading-overlay {
background: rgba(255, 255, 255, 0.5);
}

.dot {
position: absolute;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000000;
animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
}

.dot:nth-child(1) {
top: 90px;
left: 180px;
animation-delay: 0s;
}

.dot:nth-child(2) {
top: 135px;
left: 168px;
animation-delay: 0.41667s;
}

.dot:nth-child(3) {
top: 168px;
left: 135px;
animation-delay: 0.83333s;
}

.dot:nth-child(4) {
top: 180px;
left: 90px;
animation-delay: 1.25s;
}

.dot:nth-child(5) {
top: 168px;
left: 45px;
animation-delay: 1.66667s;
}

.dot:nth-child(6) {
top: 135px;
left: 12px;
animation-delay: 2.08333s;
}

.dot:nth-child(7) {
top: 90px;
left: 0px;
animation-delay: 2.5s;
}

.dot:nth-child(8) {
top: 45px;
left: 12px;
animation-delay: 2.91667s;
}

.dot:nth-child(9) {
top: 12px;
left: 45px;
animation-delay: 3.33333s;
}

.dot:nth-child(10) {
top: 0px;
left: 90px;
animation-delay: 3.75s;
}

.dot:nth-child(11) {
top: 12px;
left: 135px;
animation-delay: 4.16667s;
}

.dot:nth-child(12) {
top: 45px;
left: 168px;
animation-delay: 4.58333s;
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes jitter {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(0.7, 0.7);
}
50% {
transform: scale(1, 1);
}
75% {
transform: scale(1.3, 1.3);
}
100% {
transform: scale(1, 1);
}
}
@keyframes fade-in-out {
0% {
opacity: 0.8;
}
25% {
opacity: 0.2;
}
75% {
opacity: 1;
}
100% {
opacity: 0.8;
}
}
.loadingDiv{
position: absolute; z-index: 1000; top: 0px; left: 0px;
width: 100%; height: 100%; background: white; text-align: center;
}

到这里其实想要的效果已经出来了，只是目前还是有个小问题在困扰我，在谷歌浏览器下完全没有问题，堪称完美。但是在火狐浏览器下感觉还是有些许卡顿，就像是网速太慢的那种感觉，不知是否是浏览器本身的某些问题呢？？

巴特西

关于使用easyui为前端框架，加载表格数据较多时在火狐浏览器会出现表格片段不停闪烁问题的兼容问题解决。

最新文章

热门文章