基于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解析XML的实现代码
Nov 12 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 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编程中10个最常见的错误
2014/08/08 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
python处理xml文件的方法小结
2017/05/02 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
求职简历的自我评价怎样写好
2013/10/07 职场文书
高中生活自我鉴定
2014/01/18 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
党员争先创优承诺书
2015/01/20 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android