ActiveReports H5持续loading效果直至数据完全加载到页面

收藏

本帖最后由 lyz880524 于 2018-10-20 11:30 编辑

消除ActiveReports H5空白时间

ActiveReports H5中
reportLoaded开始查询前的操作
documentLoaded查询完毕以后，开始将数据渲染到页面当中，但是该过程如果数据量稍微大点（比如上千行数据）的话，会造成页面空白时间的等待，降低了用户体验，为解决此问题，暂提供以下方案。

一：新建css文件内容如下
#viewerContainer .myspinner{display:none;}
.myspinner {
display: inline-block;
position: absolute;
left:47%; top:47%;
display:none;
  }

  .myspinner div {
transform-origin: 25px 25px;
animation: myspinner 1.3s linear infinite;
  }

  .myspinner div:after {
content: " ";
display: block;
position: absolute;
top: -14px;
left: 22px;
width: 7px;
height: 23px;
background: #000;
border-radius: 5px;
  }

  .myspinner div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -1.2s;
  }

  .myspinner div:nth-child(2) {
transform: rotate(27deg);
animation-delay: -1.1s;
  }

  .myspinner div:nth-child(3) {
transform: rotate(55deg);
animation-delay: -1s;
  }

  .myspinner div:nth-child(4) {
transform: rotate(83deg);
animation-delay: -0.9s;
  }

  .myspinner div:nth-child(5) {
transform: rotate(110deg);
animation-delay: -0.8s;
  }

  .myspinner div:nth-child(6) {
transform: rotate(138deg);
animation-delay: -0.7s;
  }

  .myspinner div:nth-child(7) {
transform: rotate(166deg);
animation-delay: -0.6s;
  }

  .myspinner div:nth-child(8) {
transform: rotate(193deg);
animation-delay: -0.5s;
  }

  .myspinner div:nth-child(9) {
transform: rotate(221deg);
animation-delay: -0.4s;
  }

  .myspinner div:nth-child(10) {
transform: rotate(249deg);
animation-delay: -0.3s;
  }

  .myspinner div:nth-child(11) {
transform: rotate(276deg);
animation-delay: -0.2s;
  }

  .myspinner div:nth-child(12) {
transform: rotate(304deg);
animation-delay:-0.1s;
  }

.myspinner div:nth-child(13) {
transform: rotate(332deg);
animation-delay: 0s;
  }

  @keyframes myspinner {
0% {
   opacity: 1;
}
100% {
   opacity: 0;
}
  }

二：加入以下html用于显示loading效果
<div class="myspinner">
                              <div></div> <div></div> <div></div> <div></div> <div></div>
                              <div></div> <div></div> <div></div> <div></div> <div></div>
                                 <div></div> <div></div> <div></div>
</div>

<div id='viewerContainer'></div>

三：

var viewer = GrapeCity.ActiveReports.Viewer({element : '#viewerContainer',
reportLoaded:function(){
//开始查询
$("#viewerContainer .spinner").hide();
$(".myspinner").show();

},
documentLoaded:function() {
//查询完毕
fixReportOnLoaded();
},

});

四：显示报表，隐藏loading效果。
function fixReportOnLoaded() {
if($(".document-view").html().length>0){
$("#viewerContainer").show();
$(".myspinner").hide(); return;
}
setTimeout(function() { fixReportOnLoaded(); }, 100);
}

		自动登录	找回密码
密码			立即注册

ActiveReports H5持续loading效果直至数据完全加载到页面

0 个回复

微信认证勋章

元老葡萄

讲师达人