基于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 相关文章推荐
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
DIV菜单层实现代码
Nov 19 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
ES6基础之默认参数值
Feb 21 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
理解php依赖注入和控制反转
2016/05/11 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python制作爬虫采集小说
2015/10/25 Python
详谈python http长连接客户端
2017/06/12 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
Java面试题及答案
2012/09/08 面试题
党员自我评价分享
2013/12/13 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
意向书范本
2014/07/29 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
出国留学自荐信模板
2015/03/06 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL