模拟微博的数据滚动加载

最新推荐文章于 2021-01-24 09:46:41 发布

原创最新推荐文章于 2021-01-24 09:46:41 发布 · 255 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #QQ #浏览器 #XHTML #HTML

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

现在的微博非常的流行，本人在使用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文件在附件中下载。
这只是一种简单的演示，在微博的场景中可能并不适用，比如你想看最新的微博就不能一下回去了。还有就是后台数据的获取，大数据量缓存的问题。也许在某些场景下会有用武之地呢？
欢迎评论。。。

[img]http://dl.iteye.com/upload/attachment/354358/afd3364d-859c-349d-b69d-4801182294d9.jpg[/img]