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每次只能有一个在执行。

  

时间: 2024-10-20 22:46:08

JQuery实现无刷新下拉加载图片的相关文章

ajax 无刷新下拉加载更多。

随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css  和简单js交互. js  code 1 $(function() { 2 var page = 1; 3 var discount = $('#discount'); 4 var innerHeight = window.innerHeight; 5 var timer2 = null; 6 $.ajax({ 7 url: '/lightapp/marketing/verify/apply/l

jQuery手机端上拉刷新下拉加载更多页面

<!doctype html> <html> <head> <title>jquery 手机端上拉刷新下拉加载更多页面</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewpost" content="width=device-wi

安卓,采用最简单易懂的方式实现上拉刷新下拉加载更多

<!-- Description:上拉刷新,下拉加载更多是现在最流行的手势操作,但是对于初学者来说,在实现上是有一定难度的, 网上很多教程讲的都过于复杂,对于初学者无法起到引导作用,特此写本文,帮助安卓新手入门理解此, 还有最为重要的一点:本文只帮助你理解,并不是想你成为代码搬运工!别被那么多代码吓到了, 其中很多都是注释,仔细看注释对你理解有很大的帮助 Author:Booker L Date:2014-05-16 --> 一,事先准备: 实现该功能,最基本的需要两个东西,一个是OnTouc

Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的实现 -- CardView.RecyclerView也是谷歌V7包下新增的控件,用来替代ListView的使用,在RecyclerView标准化了ViewHolder类似于ListView中convertView用来做视图缓存. RecyclerView的优点就是,他可以通过设置LayoutMan

PullToRefreshRecyclerView——带上拉刷新下拉加载功能的RecyclerView

PullToRefreshRecyclerView——带上拉刷新下拉加载功能的RecyclerView

新浪微博项目---首页技术点三.上拉刷新,下拉加载的实现(使用ios自带的小菊花实现)

一.上拉刷新,下拉加载的实现(使用ios自带的小菊花实现) 1.下拉刷新 #pragma mark ---集成下*拉刷新控件 -(void)setupDownRefresh { //1.添加刷新控件 UIRefreshControl *control = [[UIRefreshControl alloc] init]; //只有用户通过手动下拉刷新,才会触发UIControlEventValueChanged事件 [control addTarget:self action:@selector(

iOS-上拉刷新下拉加载 新版MJRefresh和EGOTableViewPullRefresh

上拉刷新下拉加载比较流行的两个第三方 MJRefresh和 EGOTableViewPullRefresh 一.最新版的MJRefresh 首先介绍M了个J的 最新版的MJRefresh 因为他的github里有详细介绍,话不多说上代码 [objc] view plain copy // //  ViewController.m //  新版MJRefresh Demo // //  Created by Jack_Jia on 16/1/19. //  Copyright ? 2016年 Ja

Android MVP设计框架模板 之 漂亮ListView上拉刷新下拉加载更多

mvp的全称为Model-View-Presenter,Model提供数据,View负责显示,Controller/Presenter负责逻辑的处理.MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会直接从Model中读取数据而不是通过 Controller. 项目中大部分是面对接口编程,通过P层可以预先将所有需要的接口功能

通用版的上拉刷新下拉加载控件

通用版的上拉刷新下拉加载控件 适用于各种控件实现上拉刷新,下拉加载的功能. 下载地址:http://www.devstore.cn/code/info/964.html 运行截图: