基于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 相关文章推荐
ECMAScript 创建自己的js类库
Nov 22 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
package.json中homepage属性的作用详解
Mar 11 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中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
使用js画图之饼图
2015/01/12 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
layui实现数据分页功能
2019/07/27 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python中pip的安装与使用教程
2018/08/10 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python如何实现数据的线性拟合
2019/07/19 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
phpquery中文手册
2021/03/18 PHP
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
保护地球的宣传语
2015/07/13 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android