基于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实现的抽象CSS圆角效果!!
May 03 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 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中Fatal error session_start()错误解决步骤
2014/08/05 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
js实现简易ATM功能
2020/10/27 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python正则表达式常用函数总结
2017/06/24 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
幼儿园儿童节主持词
2014/03/21 职场文书
项目工作说明书
2014/07/29 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
中秋客户感谢信
2015/01/22 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
运动会加油稿30字
2015/07/21 职场文书
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS