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


Posted in Javascript onJanuary 31, 2014

关键代码:

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

Javascript 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 #Javascript
js实现俄罗斯方块小游戏分享
Jan 31 #Javascript
获取select元素被选中的文本内容的js代码
Jan 29 #Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 #Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 #Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 #Javascript
js跳转页面方法总结
Jan 29 #Javascript
You might like
mysql 字段类型说明
2007/04/27 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
应用数学专业求职信
2014/03/14 职场文书
森林防火宣传标语
2014/06/27 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
十八大宣传标语
2014/10/09 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
党纪处分决定书
2015/06/24 职场文书
感恩教育主题班会
2015/08/12 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android