基于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 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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
Wordpress php 分页代码
2009/10/21 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
护理专业自荐信范文
2014/02/26 职场文书
社区维稳工作方案
2014/06/06 职场文书
成人成长感言如何写?
2019/08/16 职场文书