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

转载 2018年04月16日 19:07:21

参考博客: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();
})


JQuery滚动条插件jScrollPane的详细使用(除去点击边框)

JQuery  jScrollPane是一款强大的滚动条插件,它提供了众多设置设置选项来控制滚动条,而且还有可控的CSS选项来更改滚动条外观。浏览器提供了默认的滚动条,仅当元素内容溢出时且样式over...
  • u010926243
  • u010926243
  • 2016-02-18 20:44:35
  • 2695

jScrollPane 滚动条 jQuery 滚动条

  • 2013年05月22日 14:29
  • 38KB
  • 下载

jScrollPane的使用(jquery滚动条插件)

这是一个js的页面滚动条插件 使用时引入三个文件:(路径自行填写) 然后再给需要添加滚动条的容器加上一个方法,搞定 $(function(){         ...
  • dotNET25
  • dotNET25
  • 2013-05-19 22:08:59
  • 7989

Swing 设置JScrollPanel 滚动条位置

Swing 设置JScrollPanel 滚动条位置
  • daixinmei
  • daixinmei
  • 2014-08-14 15:41:31
  • 5434

JScrollPanel中加入其他组件滚动条不显示问题

今日界面时遇见一个问题,我的界面结构Frame中放入LineDisplay(extends JScroll),LineDisplay中放入LinePanel(extends Jpanel),重写LIn...
  • baencong
  • baencong
  • 2014-02-18 15:44:32
  • 819

Java Swing JTextArea,JScrollPane——实现数据的刷新到最底行

JTextArea:是纯文本的多行区域JScrollPane:JScrollPane 管理视口、可选的垂直和水平滚动条以及可选的行和列标题视口 之前在使用JTextArea来实现数据在加入到文本域...
  • zp357252539
  • zp357252539
  • 2016-01-19 23:24:26
  • 4124

【前端库】jscrollpane.js 自定义滚动条

前言 jScrollPane是一个jQuery插件,它允许用HTML结构替换浏览器的默认滚动条(在具有溢出的元素上:auto),可以在css中自定义html。jScrollPane的设计灵活但...
  • weixin_41000111
  • weixin_41000111
  • 2018-03-10 09:13:56
  • 139

Java学习笔记-------使用JScrollPane 不显示滚动条的原因:

只有当处于:JScrollPane 之中的组件,其显示的宽和高大于JScrollPane 的宽和高时,才会显示滚动条。  /*  * 功能:使用JTextArea 和 JTextField 制作聊...
  • H002399
  • H002399
  • 2015-08-07 15:45:20
  • 2785

JScrollPane滚动条设置

JScrollPane的使用 构造函数 使用示例 显示策略 使JScrollPane显示或隐藏滚动条 JScrollPane的使用 类层次结构图: java.lang.Object      ...
  • Yao__Shun__Yu
  • Yao__Shun__Yu
  • 2012-07-29 10:40:11
  • 5357

Java:JScrollPane:根据需要设置滚动条

java ,JScrollPane,滚动条
  • liqiancao
  • liqiancao
  • 2015-12-27 21:48:55
  • 11137
收藏助手
不良信息举报
您举报文章:jQuery滚动条插件jScrollPane通过手动刷新提升性能方法
举报原因:
原因补充:

(最多只允许输入30个字)