基于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 跨域访问解决方案
Feb 14 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
react 创建单例组件的方法
Apr 26 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python将unicode转为str的方法
2017/06/21 Python
python简单验证码识别的实现方法
2019/05/10 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
师范生的个人求职信范文
2014/01/04 职场文书
卫生巾广告词
2014/03/18 职场文书
数学系毕业生求职信
2014/05/29 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技