基于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读取过程中多次触发事件,造成多次加载内容。
 

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

  1. jQuery自动加载更多程序

    1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...

  2. jQuery自动加载更多程序(转)

    jQuery自动加载更多程序   1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...

  3. jquery列表自动加载更多

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. JS实现页面复制文字时自动加版权

    经亲自实践,尝试了各种方法,目前可行的方法主要有如下两种: 可以在任何运行使用js代码的网站中使用,比如本人在自己的博客园博客中实现了一下,读者您可亲自在本人博客上测试. 方法1: <scrip ...

  5. 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法

    一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...

  6. Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

    index.php代码   [html] view plaincopy <!DOCTYPE html PUBLIC ;}                .single_item{padding: ...

  7. Layman H5+Webapp+MUI App 页面滑至到底部自动加载新的内容

    要点:使用jquery的scroll()方法实现,当用户滚动指定的元素时,会发生 scroll 事件 scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口) scroll() 方 ...

  8. Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页

    1.index.php <style type="text/css"> #container{margin:10px auto;width: 660px; border ...

  9. pc网页到移动端怎么自动加载适应移动端的css。

    1.通过link标签判断加入 以前听说过在link标签中加media = "handheld",但这个用到安卓或苹果都不管用,后来尝试以下方法,是管用的. <link hre ...

随机推荐

  1. Oracle 常用入侵命令

    1.查看当前数据库实例名称:select * from v$instance;2.查看当前用户的角色:select * from user_role_privs;3.查看当前用户下所有的表:selec ...

  2. Java操作Excel(读、写、搜索关键字、插入图片)

    import java.io.File; import java.io.IOException; import jxl.Cell; import jxl.Sheet; import jxl.Workb ...

  3. wireshark基本用法及过虑规则

     wireshark基本用法及过虑规则 标签: wireshark基本语法wireshark使用方法wireshark包过虑规则 2015-02-03 18:44 10711人阅读 评论(0) 收藏  ...

  4. kindle paperwhite折腾记

    在亚马逊官网上买了一个kindle paperwhite 一代(849元) , 打算再买个皮套, 淘宝店  http://detail.tmall.com/item.htm?spm=a230r.1.1 ...

  5. 高效使用git的一些命令

    1,添加文件到版本库        添加单个文件: git add filename        添加所有txt文件: git add *.txt        添加所有修改文件: git add ...

  6. C# Window Service详解

    Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...

  7. WiFi入口流量O2O微应用平台

    WiFi入口流量O2O微应用平台 随着智能手机一年比一年销量大好,传统的互联网的流量争夺战场已经转向了移动互联网,各大巨头纷纷出招,智能wifi路由器就是其中最重要的一块战略高地.所谓的智能路由器,解 ...

  8. CSS初学

    CSS作用是美化html网页.内联:body 标签里.内嵌:head标签里,可以多次重复使用.p{}:引用时,class引用.#p{}:引用时,id引用超链接的stylea:link 超链接被点前的状 ...

  9. 给WordPress Page页面添加摘要输入框

    默认情况下 WordPress Page 编辑页面没有摘要(Excerpt)输入框,所以对 WordPress 进行 SEO 的时候比较麻烦. 这个时候我们就可以通过以下代码给我 WordPress ...

  10. zstu.4014.水手分椰子(数学推导)

    深入浅出学算法015-水手分椰子 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 1827  Solved: 524 Description n个水手来到 ...