WEB开发 Scroll 滚动条加载数据

来源：互联网发布：淘宝买家骗术编辑：程序博客网时间：2024/05/17 00:59

现在的微博非常的流行，本人在使用QQ微博的过程中发现，最新的微博信息是显示在最前面，之前时间的微博信息是随着你拉动滚动条而加载，当滚动条拉到最下方的时候就加载一定量的信息。这不仅是一种很好的用户体验，而且充分发挥了AJAX技术的优势，实现了按需加载。
如果数据有很多，一直往下看，那页面就会越来越长，而且内存就占用越来越多，到一定量，浏览器会相应越来越慢并且有可能会失去响应。如果解决这个问题呢，一种最普遍的解决办法就是使用分页。那有没有其他的解决方案呢，我想了一个方案，可否实现滚屏数据，每次滚动条滚动到最低端的时候加载一定量新的数据，那我就删除最前面的同样条数的数据，当滚动条在最顶端的时候，我就加载前面的一定量的数据，而删除最下面同样条数的数据。整个页面始终保持着一定条数的数据。基于这个想法简单的用js实现了下。下面是代码：

Html代码
<%@ 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

scorll.rar (1.4 MB)
下载次数: 973

WEB开发 Scroll 滚动条 加载数据

WEB开发 Scroll 滚动条加载数据