基于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脚本
Dec 12 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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防止网站被攻击的应急代码
2015/10/21 PHP
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
vue路由的配置和页面切换详解
2020/09/09 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python 可爱的大小写
2008/09/06 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python实现字典依据value排序
2016/02/24 Python
Python 基础知识之字符串处理
2017/01/06 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
性能测试工程师的面试题
2015/02/20 面试题
汇科协同Java笔试题
2012/03/31 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
班长演讲稿范文
2014/04/24 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
公司员工体检通知
2015/04/21 职场文书
运动会通讯稿200字
2015/07/20 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
使用pytorch实现线性回归
2021/04/11 Python