先说说网页为什么要分页:
1,用户体验考虑
使用户集中注意力浏览当前页面内容,而不是给出十几屏数据,时浏览者无所适从,产生压迫感、厌倦感、焦虑感;分页使页面短小(完全可以把内容限制在一屏大小的面积内),容易布局,也增强了浏览者视觉感受。也是因为页面短小,所以加载快速。
2,技术原因
最早促使页面分页的原因,主要是技术原因。因为服务器和网速都非常慢,所以需要一种办法,使服务器的负载与网络的负担都能达到一种间歇的分布的平衡,还考虑到杜绝浏览者无意识地下载冗余信息。分页使大批量的数据(主要是表里的记录),按固定的单位(页)下载到浏览者的机器,浏览者在浏览页面的间隙,服务器和网络资源得以间断的释放,可以为别的 浏览者服务。这种方式可以基本满足大多数浏览者的需求,有效地缓解了互联网资源的压力。当然,直到现在,这种压力似乎永远没有减小的迹象,而且相反,压力 越来越大了。谁要人是一头贪婪的动物呢?分页技术虽然很有效,成了动态网页的标配技术,但用久了,难免产生审美疲劳。
瀑布流分页:当浏览者浏览了当前页面内容后,向下拉动浏览器滚动条,本来还在服务器上的内容,会根据滚动条的拖动,动态地从服务器上按一定的单位(类似分页)下载下来。这样还带来了一个好处,就是以前已经浏览过的内容,还在浏览器当前窗口的上部(可以理解为被缓存了),要再次浏览的话,直接向上拖动滚动条或转动鼠标 滚轮即可。而采用分页技术的话,要查看先前的内容,必需再次点击鼠标(比如“上一页”等),再次请求服务器端的页面(假设没有采用缓存技术的),再次等待 页面数据的下载和呈现 。实现这种浏览效果,可以改善用户体验(最起码有新鲜感),编程技术也不难,采用 Ajax 技术是一种绝好的解决方案之一。希望更好的用户体验被大家创造出来。
分页存储过程:http://hudeyong926.iteye.com/blog/764703
- $(function () {
- var scrollTimer;
- var page = 0;
- jsonScrollPageData(0);//默认加第一页
- //下面滚动取第二页++
- $(window).on('scroll', function () { //页面出现滚动条生效,即滚动事件
- if (scrollTimer) {
- clearTimeout(scrollTimer);
- scrollTimer = null;
- }
- scrollTimer = setTimeout(function () {
- jsonScrollPageData($(this).scrollTop());
- }, 200);//0.2s
- });
- });
- function jsonScrollPageData(position) {
- var offsetHeight = 44;
- var viewportHeight = $(window).height();
- var bodyHeight = $('body').height();
- if ((bodyHeight <= position + viewportHeight + offsetHeight) && page >= 0) {
- $.ajax({
- type: 'GET',
- url: url + "?t=" + Math.random(),
- data: {page: ++page},
- async: false,
- dataType: 'JSON',
- success: function (jsonData) {
- if (jsonData.length > 0) {
- } else { //已全部显示
- page = -1;
- }
- }
- });
- }
- }
GET方式分页:
布局在页面左边的:
布局在页面中间的
布局在页面的右边