基于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 相关文章推荐
一个获取第n个元素节点的js函数
Sep 02 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
js之onload事件的一点使用心得
2013/08/14 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
轮播的简单实现方法
2016/07/28 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
运动会广播稿400字
2014/01/25 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
护士求职自荐信范文
2015/03/04 职场文书
毕业典礼主持词
2015/06/29 职场文书
学生会工作感言
2015/08/07 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
服务器SVN搭建图文安装过程
2022/06/21 Servers