基于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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
小程序转发探索示例
Feb 19 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
浅析iis7.5安装配置php环境
2015/05/10 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
JS中表单的使用小结
2014/01/11 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python简单实现刷新智联简历
2016/03/30 Python
python中set()函数简介及实例解析
2018/01/09 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
基于PyTorch中view的用法说明
2021/03/03 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
财务主管自我鉴定
2014/01/17 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
党员活动总结
2015/02/04 职场文书
小学教师见习总结
2015/06/23 职场文书
初中政治教学工作总结
2015/08/13 职场文书
如何写好闭幕词
2019/04/02 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang