浏览 8522 次
|
锁定老帖子 主题：模拟微博的数据滚动加载
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-11-26
最后修改：2010-12-03
现在的微博非常的流行，本人在使用QQ微博的过程中发现，最新的微博信息是显示在最前面，之前时间的微博信息是随着你拉动滚动条而加载，当滚动条拉到最下方的时候就加载一定量的信息。这不仅是一种很好的用户体验，而且充分发挥了AJAX技术的优势，实现了按需加载。
如果数据有很多，一直往下看，那页面就会越来越长，而且内存就占用越来越多，到一定量，浏览器会相应越来越慢并且有可能会失去响应。如果解决这个问题呢，一种最普遍的解决办法就是使用分页。那有没有其他的解决方案呢，我想了一个方案，可否实现滚屏数据，每次滚动条滚动到最低端的时候加载一定量新的数据，那我就删除最前面的同样条数的数据，当滚动条在最顶端的时候，我就加载前面的一定量的数据，而删除最下面同样条数的数据。整个页面始终保持着一定条数的数据。基于这个想法简单的用js实现了下。下面是代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/table.css" />
<script type="text/javascript" src="js/i.js"></script>
<script type="text/javascript" src="js/i.ajax.js"></script>
<script type="text/javascript" src="js/i.scroll.js"></script>
<script type="text/javascript">
I.ready(function(){
/*
* 三个必须的参数
* 1.呈现数据的表格
* 2.表头数组
* 3.请求数据的后台url
* 两个可选参数
* 1.一屏数据显示的条数，默认为100
* 2.滚动屏幕数据的加载条数,默认为10
*/
I.SCROLL.scroll(I.$('tag','table')[0],['ID','年龄','姓名','爱好'],'DataServlet');
});
</script>
</head>
<body>
<table style="margin: 0px;" cellspacing="0" class="data"></table>
</body>
</html>
后台代码以及js文件在附件中下载。 这只是一种简单的演示，在微博的场景中可能并不适用，比如你想看最新的微博就不能一下回去了。还有就是后台数据的获取，大数据量缓存的问题。也许在某些场景下会有用武之地呢？ 欢迎评论。。。 JAVA交流群：123166983 
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-12-02
昨天有做这个功能的想法，
www.dzone.com 的效果不错。 |
| 返回顶楼 | |
