A-A+

JQuery实现滚动到页面底端时自动加载更多信息代码

2016年01月09日 web前端设计 暂无评论 阅读 6 views 次

现在越来越流行的是拖动加载功能了,就是我们滚动到页面底部了就可以自动加载下一页的内容了,下面我们来看一个JQuery实现滚动到页面底端时自动加载更多信息代码.

类似微博,新浪新闻的评论等,都采用了这方法。

关键代码:

  1. var stop=true;  
  2. $(window).scroll(function(){  
  3.     totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());  
  4.     if($(document).height() <= totalheight){  
  5.         if(stop==true){  
  6.             stop=false;  
  7.             $.post("ajax.php", {start:1, n:50},function(txt){  
  8.                 $("#Loading").before(txt);  
  9.                 stop=true;  
  10.             },"text");  
  11.         }  
  12.     }  
  13. });  

HTML:

  1. <div id="Loading">Loading...</div>  

实现方法是比较页面总高度和下滚高度以判断是否到达底端,若到达底端则通过ajax读取更多的内容,用before插入到Loading之前。
stop参数是考虑到ajax读取耗时,防止在一次ajax读取过程中多次触发事件,造成多次加载内容。

下面为你推荐 10 个 jQuery 的无限滚动的插件:

1.jQuery ScrollPagination

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

2.jQuery Screw

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

3.AutoBrowse jQuery Plugin

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

4.Scroll Extend Plugin

scrollExtend 插件用来在页面滚动到屏幕底部时自动加载内容并追加 DOM 元素到页面底部,该插件其最初目的是为了跟 WordPress 集成。

5.Infinite Scroll

用了这个插件,用户访问你的网站就不用翻页啦!实际上它是预读了后续页的内容并将其直接添加到了当前页面。

6.Load Content While Scrolling With jQuery

该插件可帮助非常快速的加载页面的更多内容

7.Triggered Infinite Scroll

Triggered Infinite Scroll 是一个 Twitter 风格的自定义触发器,不过它不是自动的。

8.Infinite Ajax Scroll, a jQuery Plugin

Infinite Ajax Scroll 可将你现有的网页变成支持无限滚动的页面,无需太麻烦就可搞定。

9.Infinite Scrolling jQuery Plugin

InfiniScroll 原先是一个 jQuery 插件,用于博客的文章列表显示,不过现在已经不止这些了。

10.Unlimited Scroll using the Twitter API

标签:

给我留言