基于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 相关文章推荐
jQuery 阴影插件代码分享
Jan 09 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
让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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
前端必学之PHP语法基础
2016/01/01 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python实现复制整个目录的方法
2015/05/12 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
python 代码运行时间获取方式详解
2020/09/18 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
医学院毕业生自荐信
2013/11/08 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
英语专业推荐信
2013/11/16 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
文明餐桌活动方案
2014/02/11 职场文书
美容院营销方案
2014/03/05 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
护士实习自荐信
2015/03/06 职场文书
文明礼貌主题班会
2015/08/14 职场文书