最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用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实现无刷新下拉加载图片的更多相关文章

  1. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

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

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  3. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  4. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

  5. iOS:延迟加载和上拉刷新/下拉加载的实现

    lazy懒加载(延迟加载)UITableView 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要 ...

  6. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

  7. 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...

  8. mui上拉刷新+下拉加载

    具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  9. XRecyclerView上拉刷新下拉加载

    效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...

随机推荐

  1. mysql Packet for query is too large (1185 > 1024)异常

    注:最近mysql一直提示如下错误 Packet for query is too large (1185 > 1024). You can change this value on the s ...

  2. java-读取javabean类的set方法并设值

    /** * 新反射实例化模型 * @param filenamepath * @return */ public static Object newIntence(String filenamepat ...

  3. React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

    对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...

  4. VirtualBox内ubuntu10.10系统和windows7 共享文件夹

    材料 virtualbox 4.3.0 ubuntu10.10 window 7 sp1 步骤 1.安装好虚拟机和操作系统,(具体步骤网上有很多) 2.安装虚拟机的增强功能包, 安装完成手动系统重新, ...

  5. Java开发环境搭建——Idea开发环境

    Idea版本选择由于公司使用JDK7,所以我选择安装Version 2016.1.4(手动安装试验出来的,最新版的2016.1.4启动时提示需要安装JDK8)下载 其实可以安装多个版本的JDK,然后指 ...

  6. Hibernate Hql 总结(2)---laoyang

    package com.etc.test; import java.util.Iterator; import java.util.List; import org.hibernate.Query; ...

  7. 【gulp】工作中的实战

    写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...

  8. easyUI和bootstrap的混搭

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. selenium 等待页面加载完成

    一.隐形加载等待: file:///C:/Users/leixiaoj/Desktop/test.html 该页面负责创建一个div <html> <head> <tit ...

  10. 【辅助远程连接,可穿防火墙、NAT】一次 TeamViewer 的安装与测试

    背景: 应课程老师要求帮助某化学老师维修机器(高性能电脑),并解决老师的若干问题,在解决硬件问题(上网问题:多个网络接口)之后,化学老师提出需要远程链接到该机器,试询问之前如何实现,化学老师推荐Tea ...