基于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 相关文章推荐
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
前端性能优化建议
Sep 17 Javascript
js实现简单的随机点名器
Sep 17 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 获取文件权限函数介绍
2013/07/11 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
常见python正则用法的简单实例
2016/06/21 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
pandas去除重复列的实现方法
2019/01/29 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
使用Python实现音频双通道分离
2020/12/25 Python
毕业生文员求职信
2013/11/03 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
机关单位动员会主持词
2014/03/20 职场文书
委托书范本
2014/04/02 职场文书
开服装店计划书
2014/08/15 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
挂职个人工作总结
2015/03/05 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript