jQuery滚动条插件jScrollPane通过手动刷新提升性能方法

参考博客:https://blog.csdn.net/u010926243/article/details/50688433

根据以上作者提供的使用方法,可以在考虑到该滚动条插件使用时的性能问题。比如我之前项目遇到的情况是,一个zTree的节点展开来有2000+子节点,此时设置自动刷新参数

  1. autoReinitialise            : true

那么,当点击父节点时,此时浏览器会卡死,使用体验极其之差,因此考虑到使用性能问题,应该将其设为手动刷新,将以上参数值设为false。

设为手动刷新后,滚动条包裹的内容如div等高度宽度变化时,需要手动编写代码刷新滚动条以重新计算滚动条高宽等来适应当前包裹元素。代码如下:

  1. var setting={autoReinitialise:false};  
  2. //初始化滚动条  
  3. var jspApi=$("#scroller").jScrollPane(setting);  
  4. //获取滚动条  
  5. var refreshApi=jspApi.data("jsp");  
  6. //重新加载刷新滚动条  
  7. refreshApi.reinitialise(settings);  

在我的项目里,点击zTree时的收起/展开节点事件增加以上刷新代码:

Tree.OnTreeExpand=function(event, treeId, treeNode){
	refreshApiDevice.reinitialise(settings);
	};
	
Tree.OnTreeCollapse=function(event, treeId, treeNode){
		refreshApiDevice.reinitialise(settings);  
	};

通过以上步骤,可以大幅提升展开节点数较多,滚动条高度变化较大时的使用性能问题。

PS:手动刷新代码的位置问题

修改过程中,还发现了一个小问题,就是手动刷新的代码放在什么地方的问题。

起初,代码放置在window.onload里,并没有什么问题。但是当我点击zTree的刷新按钮重新加载一次zTree的时候此时树已经收回,此时滚动条应当也收回隐藏,但是并没有。

主要原因:

最后定位到原因是刷新代码应该在树加载完的回调里,因为树的数据是ajax请求从后台获取,树init生成之后才应该去刷新滚动条。在原先的代码里,放在window.onload里之所以也是正常的,我想应该是巧合,此时内容高度没有超出原有高度,正好也不应该产生滚动条,但是第二次刷新的时候,代码已经执行到刷新滚动条处,但此时异步执行的ajax请求还没有从后台返回data(此处树节点数据较多,耗时需要5-6s),因此页面还停留在刚刚第一次展开zTree的情况下,并不会收回滚动条。

解决办法:

将手动刷新滚动条的代码放在ajax请求返回的complete回调方法里:

$.ajax(
complete:function (errcode, data) {
   //业务代码
    $.fn.zTree.init();/zTree初始化
    refreshScrollBar();
})


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页