基于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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
vue自定义指令directive的使用方法
Apr 07 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自定义hash函数实例
2015/05/05 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
python列表生成器迭代器实例解析
2019/12/19 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
学子宴答谢词
2014/01/25 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
展览会邀请函
2015/02/02 职场文书
怎样写观后感
2015/06/19 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
golang定时器
2022/04/14 Golang
Golang 遍历二叉树
2022/04/19 Golang