前端异步加载分页数据，怎么优雅展现

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3107 天前的主题，其中的信息可能已经有所发展或是发生改变。

分页是前端做的，我一次 load20 条数据，先展示 10 条，到底部再加 10 条。问题来了，怎么让页面不会抖一下呢？

分页

load20

数据

页面

21 条回复 • 2016-05-23 17:23:19 +08:00

morning

2016-05-23 16:18:50 +08:00

https://datatables.net/ 用这个？

murmur

2016-05-23 16:21:33 +08:00

抖一下是什么你没用 append 直接清除原来的行然后重绘么？

123s

2016-05-23 16:25:44 +08:00

@murmur 我是 append 进去，原来的没有清除啊

123s

2016-05-23 16:26:07 +08:00

@morning 额，不用插件

rekulas

2016-05-23 16:26:31 +08:00

append 元素页面不会发生抖动的，只有滚动条位置会重置下，发生抖动应该是代码有问题，排除 bug 即可

123s

2016-05-23 16:26:39 +08:00

@murmur 是高度增加了，所以感觉滚动条会动一下

123s

2016-05-23 16:27:46 +08:00

@rekulas 滚动条也几乎在原来的位置，抖得不明显，只是有强迫症。有没有办法完全不动？

123s

2016-05-23 16:28:47 +08:00

@rekulas 可能我说得不清，没有抖，是动了一下。

ziki

2016-05-23 16:28:56 +08:00

@123s 滚动条变短这个你破不了吧

loading

2016-05-23 16:35:51 +08:00 via Android

是第一次没有滚动条，然后 20 条出现了滚动条导致页面变窄？

rekulas

2016-05-23 16:35:56 +08:00

@123s 没明白你的意思高度增加了滚动条位置肯定要变的为什么要让它不动？

123s

2016-05-23 16:38:33 +08:00

@rekulas 好吧。是我多想了，不可能不变短的。
@ziki

rekulas

2016-05-23 16:41:22 +08:00

@123s 你如果觉得突然变化无法接受那只能自己实现滚动条，屏蔽浏览器自己的滚动条，然后借助滚动条插件来实现，可以位置渐变视觉效果不错，不过个人感觉对大部分人来说这个意识不大

123s

2016-05-23 16:43:06 +08:00

@rekulas 我猜是在滚动下去的时候，有一个速度。这时再插东西就会改变。好吧，反正不是太明显，就这样算了。

BOYPT

2016-05-23 16:49:18 +08:00

去 twitter 看看就知道了

123s

2016-05-23 17:11:58 +08:00

@BOYPT 对，就是这种效果。我怎么看不出来

BOYPT

2016-05-23 17:16:24 +08:00

@123s twitter 的是靠近底部就更新吧？
我也实现过类似的功能，更新时候页面没有动：

if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { xxxxxx }

123s

2016-05-23 17:19:51 +08:00

@BOYPT 我也是这样的。

BOYPT

2016-05-23 17:21:36 +08:00

@123s 那要不你改成插入到 dom 后是 display:none 的，然后用个 slideDown 慢慢放出来看看是哪里抖动了

123s

2016-05-23 17:22:46 +08:00

@BOYPT

123s

2016-05-23 17:23:19 +08:00

@123s 手抖，我看其他浏览器好像没问题。 mac 下的 chrome 有点抖，不是很明显。