JQuery实现无刷新下拉加载图片
最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下:
JQuery写下拉触发ajax事件
$(window).scroll(function () {
if($(window).scrollTop()==($(document).height()-$(window).height()))//判断右边滑动条是否滑到最下
{
$.ajax({
url:"",//后台地址
dataType:"json",
data:{},//附带参数,一般加上上一次请求的结尾ID或者其他标示
......,
success:function(data){
$("#Album").append(data.result);//通过返回的结果对Album的Div进行添加数据
}
})
}
})
这一过程基本原理如下,在页面首次加载的时候加载一定的图片,等到右边滑动条滑动到最下面的时候,触发ajax事件,进行与后台通信,通过对后台请求得到json数据,其中包含了需要添加到页面的内容,通过append对页面原有的层进行追加内容(中间可能还涉及一些数据读取的问题,如果为了方便可以直接后台处理好返回一串html语句直接进行追加,但这样可扩展性小),从而实现这一效果。
在实现过程中还发现了另一个问题:jq写的scroll事件容易多次触发,即滚动一下鼠标触发多次,对于这一个情况,思考了下主要有以下两种解决思路:
1.添加计时器,在5-10秒内只允许触发一次()
2.添加一个变量,让其在scroll刚开始执行时变为false,只有一次执行完才变回true,以此保证scroll每次只能有一个在执行。
JQuery实现无刷新下拉加载图片的更多相关文章
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载
随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
- 微信小程序 上拉刷新/下拉加载
小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...
- iOS:延迟加载和上拉刷新/下拉加载的实现
lazy懒加载(延迟加载)UITableView 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要 ...
- MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...
- mui上拉刷新+下拉加载
具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- XRecyclerView上拉刷新下拉加载
效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...
随机推荐
- Java并发_volatile实现可见性但不保证原子性
读后感 介绍了volatile实现可见性的基本原理 介绍了volatile不能实现原子性的示例,volatile复合操作不能实现原子性,读取值后在自增前改值可能被其它线程读取并修改,自增后刷新值可能会 ...
- Servlet学习笔记
在这里记录最重要的要点 1,tomcat-->conf-->server.xml里面的东西是什么?(tomcat怎么知道“谁”去处理客户端来的请求?) 最主要的是一个依赖的控制,换句话说什 ...
- 函数返回多个值(c/c++)
当我们在处理一个数组的时候常常会碰到这样的问题:输入一个数组,和数组的一个元素,返回该元素所在行数和列数.这样就需要返回多组两个值,且组数不定.上述类型的函数在c语言程序里面存在两个问题.第一,函数只 ...
- NPOI的操作
public async Task<MemoryStream> ExportExcel(IList<fuquestionbank> _list, string pId, str ...
- git的详细说明文档
http://www.ihref.com/read-16369.html fork 后如何保持同步 http://www.tuicool.com/articles/6vayqen git clone ...
- Java的配置文件有多少种
最正宗的只有两个xml和properties两种,其中properties文件用的最广. 其实还有一些如txt,excel这些也可以实现配置文件,但不太正宗. 对于配置文件需要注意以下几点: 1.路径 ...
- 数据结构作业——Fresh Meat(优先队列)
Fresh Meat Description 我们故事的主角是屠夫扒鸡,起初屠夫扒鸡只是一个佣兵,他先去拜了太上老君为师,学了一技能肉钩,凭着一技肉钩驰骋决斗场,达到一段以后到阿尔伯特那里偷学了二技能 ...
- RBAC权限管理
RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联. 简单地说,一个用户拥有若干角色,每一个角色拥有若干权限. 这样,就构造成“用户-角 ...
- bzoj 2729: [HNOI2012]排队
2729: [HNOI2012]排队 Time Limit: 10 Sec Memory Limit: 128 MB Description 某中学有 n 名男同学,m 名女同学和两名老师要排队参加体 ...
- 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架(四)
SpringSecurity(1) 其实啊,这部分我是最不想写的,因为最麻烦的也是这部分,真的是非常非常的麻烦.关于SpringSecurity的配置,让我折腾了好半天,网上的配置方式一大把,但总有一 ...