jQuery插件实现网页底部自动加载-类似新浪微博

标签: jquery 插件 网页 | 发表时间:2014-08-22 17:43 | 作者:天梯梦
出处:http://www.iteye.com

要实现滚动条滚到底部自动加载后续内容到内容到底部的功能,用jQuery非常方便的,只要知道什么时候滚动到了底部就好办了。

 

$(document).scrollTop() //获取垂直滚动条到顶部的距离
$(document).height()//整个网页的高度
$(window).height()//浏览器窗口的高度
 

 

文档的高度减去窗口的高度就是滚动条可滚动的范围了。那么

$(window).scrollTop() + $(window).height()  >= $(document).height()
 

 

滚动条就到底部了,我们只要在$(window).scroll()中判断和加载内容就可以了:

$(function(){
  $(window).scroll(function() {
	  //当内容滚动到底部时加载新的内容
	  if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {
		  //当前要加载的页码
		  LoadPage(currPage);
	  }
  });
});
 

 

代码中的20是我设置的偏移量,如果底部有其它内容,要在看到底部内容时就加载,而不是必须滚动到底部,就需要这个偏移量了,$(this).scrollTop() > 20是为了不让页面还没有滚动就触发加载;至于页面要加载的内容当然是AJAX处理了,都在LoadPage()中处理就行了!

 

源自: http://www.playcode.cn/jquery-shi-xian-gun-dong-dao-di-bu-zi-dong-jia-zai-nei-rong-gun-dong-fan-ye.html

 

新浪微博网页自动底部加载的效果很酷吧?其实这种叫做“ 无限滚动的翻页技术”,当你页面滑到列表底部时候无需点击就自动加载更多的内容。

 

其实有很多jQuery的插件都已经实现了这个效果,我们来介绍几个吧!

 

1、jQuery ScrollPagination

jQuery ScrollPagination plugin 是一个jQuery 实现的支持无限滚动加载数据的插件。

地址: http://andersonferminiano.com/jqueryscrollpagination/

他的demo下载: http://andersonferminiano.com/jqueryscrollpagination/jqueryscrollpagination.zip

 

实例代码:

$(function(){
$('#content').scrollPagination({
'contentPage': 'democontent.html', // the url you are fetching the results
'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});

 

2、 jQuery Screw

Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件。

官方地址: https://github.com/jasonlau/jQuery-Screw

 

3. AutoBrowse jQuery Plugin

Autobrowse jQuery Plugin 插件在用户滚动页面的时候自动通过 Ajax 加载更多内容,使用浏览器内置缓存。

官方地址: https://github.com/msjolund/jquery-esn-autobrowse

 源自: http://www.makeyuan.com/2014/02/21/1080.html





已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery 插件 网页] 推荐:

实用的网页交互jQuery插件

- - Jackchen Design 1984
我们在网页设计中经常需要展示一些图片,或者是图片和文字的交互. 这个时候我们需要将我们的设计转化成代码然后根据产品经理的想法去慢慢实现出来. 但是这个过程通常是漫长和反复的. 如果需要快速的创建一个网页的交互,最快和最好的方法是实用一个jQuery插件. 只需要短短几分钟就能实现几个小时甚至几天里纠结的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

6款强大的 jQuery 网页布局创建及优化插件

- pathfinder - ITeye资讯频道
本文将为您介绍6款功能强大的jQuery插件,它们能够帮助您方便快捷地创建复杂的网络布局并进行优化. 该插件可以创建任何你想要的UI形式:包括从简单的标题或侧边栏,到一个包含工具栏,菜单,帮助面板,状态栏,子表格等复杂的应用. 动态布局jQuery插件,折叠式CSS浮动面板. 该插件灵感来自于Aza Raskin的UI工作中.

使用jQuery插件轻松实现动态流动的网页布局

- 可乐加糖 - ITeye资讯频道
   本文将介绍一种新兴的网页布局——动态和流动布局,它可以巧妙填补网页中的所有空间,并重新显示在每个页面和浏览器中,此布局通常具备平滑的动画效果,部分甚至能够提前根据不同的类别进行筛选.    下面将列举8个具备这些布局的网站,在这篇文章的最后列举了3个jQuery插件,使用它们可以轻松实现同样的效果.

jQuery插件实现网页底部自动加载-类似新浪微博

- - Web前端 - ITeye博客
要实现滚动条滚到底部自动加载后续内容到内容到底部的功能,用jQuery非常方便的,只要知道什么时候滚动到了底部就好办了. $(document).scrollTop() //获取垂直滚动条到顶部的距离 $(document).height()//整个网页的高度 $(window).height()//浏览器窗口的高度.

常用JQuery插件整理

- xxg - 博客园-首页原创精华区
  虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来.   jquery.HooRay(哈哈,自己写的插件是必须有的).   jquery UI(官方的UI插件,功能很多,但我只用少数几个).   artDialog(很欣赏这个插件,又强大又美观).

2010年最佳jQuery插件

- seenxu - 博客园新闻频道
在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来. WDL的作者从大量的优秀 jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best. 2010年最佳jQuery插件(排名不分先后):. 一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容.

[原]jQuery ListBox Plugin(ListBox插件)

- We_Get - 博客园-首页原创精华区
转载请注明作者(think8848)和出处(http://think8848.cnblogs.com). 未经作者同意,请勿擅自修改本文内容. 这两天项目中要用到类似于ListBox的功能了,本以为有很多jQuery插件,没有想到的是,居然没有搜到好用的,咋办呢,自已动手丰衣足食吧,于是花了一个晚上的时间做出来一个,上效果图:.

JQuery图表插件——Highcharts

- We_Get - 博客园-首页原创精华区
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO. 先上三个图,分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意. 第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式.

jquery Dialog - 弹出窗插件

- Bloger - 博客园-首页原创精华区
    分享几个jquery Dialog弹出窗插件.     1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB,要求jQuery 1.5.2+支持. 可用于替换JavaScript原始的“alert” 和“confirmation”对话框. 这个插件使用jQuery Plugin Boilerplate构建.