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);
}

页: [1]
查看完整版本: ActiveReports H5持续loading效果直至数据完全加载到页面