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

 这篇文章主要介绍了基于JQuery实现滚动到页面底端时自动加载更多信息,类似微博,新浪新闻的评论等,都采用了这方法,需要的朋友可以参考下

关键代码:
 代码如下:
var stop=true; 
$(window).scroll(function(){ 
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 
    if($(document).height() <= totalheight){ 
        if(stop==true){ 
            stop=false; 
            $.post("ajax.php", {start:1, n:50},function(txt){ 
                $("#Loading").before(txt); 
                stop=true; 
            },"text"); 
        } 
    } 
});
 
 
HTML:
 
 代码如下:
<div id="Loading">Loading...</div>
 
 
实现方法是比较页面总高度和下滚高度以判断是否到达底端,若到达底端则通过ajax读取更多的内容,用before插入到Loading之前。
stop参数是考虑到ajax读取耗时,防止在一次ajax读取过程中多次触发事件,造成多次加载内容。
 

时间: 2024-11-17 00:08:02

基于JQuery实现滚动到页面底端时自动加载更多信息的相关文章

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

类似微博,新浪新闻的评论等,都采用了这方法. 关键代码: var stop=true; $(window).scroll(function(){     totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());     if($(document).height() <= totalheight){         if(stop==true){             stop=false

基于javascript实现浏览器滚动条快到底部时自动加载数据_javascript技巧

废话不多说了,直接给大家贴js代码了. <!DOCTYPE html> <html> <head> <script src="jquery-...js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = ; /

Android下拉刷新、滚动到底部自动加载更多RecyclerView组件

收集下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView. 开源组件: Android HeaderAndFooterRecyclerView(强烈推荐) ExRecyclerView PullRefreshLoadRecyclerView ExRecyclerView 具体移步:http://blog.csdn.net/jdsjlzx/article/details/50462247

android Listview下拉滚动时自动加载数据

  最近在研究网络数据加载的问题,比如我有几百,甚至上千条数据,这些数据如果一次性全部加载到arraylist,然后再加载到Listview中.我们必然会去单独开线程来做,这样造成的结果就是会出现等待时间很长,用户体验非常不好.我的想法是动态加载数据,第一次加载十条,然后往下面滑动的时候再追加十条,再往下面滑动的时候再去追加,这样大大减少了用户等待的时间,同时给处理数据留下了时间.网上看到了这样一个例子,挺好的,我改动了一下,达到了我想要的结果. import android.app.Activ

Android ListView滚动到底后自动加载数据_Android

熟悉Android的朋友们都知道,不管是微博客户端还是新闻客户端,都离不开列表组件,可以说列表组件是Android数据展现方面最重要的组件,我们 今天就要讲一讲列表组件ListView加载数据的相关内容.通常来说,一个应用在展现大量数据时,不会将全部的可用数据都呈现给用户,因为这不管对于服 务端还是客户端来说都是不小的压力,因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.比如:微博客户端可能会在用户滑动至列表底端时自动加 载下一页数据,也可能在底部放置一个"加载更多"按钮,

Android ListView滚动到底后自动加载数据

熟悉Android的朋友们都知道,不管是微博客户端还是新闻客户端,都离不开列表组件,可以说列表组件是Android数据展现方面最重要的组件,我们 今天就要讲一讲列表组件ListView加载数据的相关内容.通常来说,一个应用在展现大量数据时,不会将全部的可用数据都呈现给用户,因为这不管对于服 务端还是客户端来说都是不小的压力,因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.比如:微博客户端可能会在用户滑动至列表底端时自动加 载下一页数据,也可能在底部放置一个"加载更多"按钮,

基于jquery实现页面滚动到底自动加载数据的功能_jquery

现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由于它每次只加载一部分数据,当我们有大量的数据,但不能显示所有,这时我们可以考虑使用异步方式加载数据. 数据异步加载可以发生在用户点击"查看更多"按钮或滚动条滚动到窗口的底部时自动加载:在接下来的博文中,我们将介绍如何实现自动加载更多的功能. 图1 微博加载更多功能 正文 假设,在我们的数据库中存放着用户的消

实现页面打开后滚动到最底端的效果

页面     滚动页面的方法有scroll.scrollBy和scrollTo,三个方法都带两个参数:x(X轴上的偏移量)和y(Y轴上的偏移量).因为是要滚动到页面底部,所以参数x为0,y为页面的滚动高度.另外,页面的滚动高度必须在网页加载完成后才能获取到,所以触发事件用onload. 具体步骤: 方法一:用scroll方法实现. <body > <script> document.write(new Array(100).join("<br>"))

jquery 页面滚动到底部自动加载插件集合

 很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容 很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件:    1. jQuery ScrollPagination   jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件.   2. jQuery Screw   Sc