首页 › 专题教程 › ActiveReports H5持续loading效果直至数据完全加载到页面

lyz880524 发表于 2018-10-20 11:17:03

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效果直至数据完全加载到页面