首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

Posted in Javascript onJune 07, 2016

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>滚动到页面顶部加载</title>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/endlesspage.js" type="text/javascript"></script>
   <style type="text/css">
      .mainDiv {
        width: 800px;
        border: solid 1px #f00;
        padding: 10px;
      }
      .item {
        width: 600px;
        height: 50px;
        border: solid 1px #00ff90;
        font-size: 12px;
        margin: 10px;
      }
      .title {
        font-size: 16px;
        line-height: 20px;
      }
      .content {
        line-height: 14px;
      }
      .alink
      {
        display:none;
      }
      .loaddiv
      {
        display:none;
      }
   </style>
</head>
<body>
  <h1>滚动测试</h1>
  <div class="mainDiv">
    <!--<div class="item">
      <div class="title">title</div>
      <div class="content">content content content content content content content</div>
    </div>
    -->
  </div>
  <div class="loaddiv">
    <img src="images/loading.gif" />
  </div>
  <div>
    <a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a>
  </div>
</body>
</html>
/*endlesspage.js*/
var gPageSize = 10;
var i = 1; //设置当前页数，全局变量
$(function () {
  //根据页数读取数据
  function getData(pagenumber) {
    i++; //页码自动增加，保证下次调用时为新的一页。
    $.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {
      if (data.length > 0) {
        var jsonObj = JSON.parse(data);
        insertDiv(jsonObj);
      }
    });
    $.ajax({
      type: "post",
      url: "/ajax/Handler.ashx",
      data: { pagesize: gPageSize, pagenumber: pagenumber },
      dataType: "json",
      success: function (data) {
        $(".loaddiv").hide();
        if (data.length > 0) {
          var jsonObj = JSON.parse(data);
          insertDiv(jsonObj);
        }
      },
      beforeSend: function () {
        $(".loaddiv").show();
      },
      error: function () {
        $(".loaddiv").hide();
      }
    });
  }
  //初始化加载第一页数据
  getData(1);
  //生成数据html,append到div中
  function insertDiv(json) {
    var $mainDiv = $(".mainDiv");
    var html = '';
    for (var i = 0; i < json.length; i++) {
      html += '<div class="item">';
      html += ' <div class="title">' + json[i].rowId + '  ' + json[i].D_Name + '</div>';
      html += ' <div class="content">' + json[i].D_Name + '  ' + json[i].D_Password + '</div>';
      html += '</div>';
    }
    $mainDiv.append(html);
  }
  //==============核心代码=============
  var winH = $(window).height(); //页面可视区域高度
  var scrollHandler = function () {
    var pageH = $(document.body).height();
    var scrollT = $(window).scrollTop(); //滚动条top
    var aa = (pageH - winH - scrollT) / winH;
    if (aa < 0.02) {//0.02是个参数
      if (i % 10 === 0) {//每10页做一次停顿！
        getData(i);
        $(window).unbind('scroll');
        $("#btn_Page").show();
      } else {
        getData(i);
        $("#btn_Page").hide();
      }
    }
  }
  //定义鼠标滚动事件
  $(window).scroll(scrollHandler);
  //==============核心代码=============
  //继续加载按钮事件
  $("#btn_Page").click(function () {
    getData(i);
    $(window).scroll(scrollHandler);
  });
});
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
using MSCL;
using Newtonsoft.Json;
public class Handler : IHttpHandler {
  public void ProcessRequest(HttpContext context)
  {
    //核心处理程序
    string pageSize = context.Request["pagesize"];
    string pageIndex = context.Request["pagenumber"];
    if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex))
    {
      context.Response.Write("");
    }
    else
    {
      //请结合实际自行取分页数据，可调用分页存储过程
      MSCL.PageHelper p = new PageHelper();
      p.CurrentPageIndex = Convert.ToInt32(pageIndex);
      p.FieldsName = "*";
      p.KeyField = "d_id";
      p.SortName = "d_id asc";
      p.TableName = "testtable";
      p.EndCondition = "count(*)";
      p.PageSize = Convert.ToInt32(pageSize);
      DataTable dt = p.QueryPagination();
      string json = JsonConvert.SerializeObject(dt, Formatting.Indented);
      context.Response.Write(json);
    }
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
}
[
 {
  "rowId": 1,
  "D_Id": 1,
  "D_Name": "名称1",
  "D_Password": "密码测试1",
  "D_Else": "其他1"
 },
 {
  "rowId": 2,
  "D_Id": 2,
  "D_Name": "名称2",
  "D_Password": "密码测试2",
  "D_Else": "其他2"
 },
 {
  "rowId": 3,
  "D_Id": 3,
  "D_Name": "名称3",
  "D_Password": "密码测试3",
  "D_Else": "其他3"
 },
 {
  "rowId": 4,
  "D_Id": 4,
  "D_Name": "名称4",
  "D_Password": "密码测试4",
  "D_Else": "其他4"
 },
 {
  "rowId": 5,
  "D_Id": 5,
  "D_Name": "名称5",
  "D_Password": "密码测试5",
  "D_Else": "其他5"
 },
 {
  "rowId": 6,
  "D_Id": 6,
  "D_Name": "名称6",
  "D_Password": "密码测试6",
  "D_Else": "其他6"
 },
 {
  "rowId": 7,
  "D_Id": 7,
  "D_Name": "名称7",
  "D_Password": "密码测试7",
  "D_Else": "其他7"
 },
 {
  "rowId": 8,
  "D_Id": 8,
  "D_Name": "名称8",
  "D_Password": "密码测试8",
  "D_Else": "其他8"
 },
 {
  "rowId": 9,
  "D_Id": 9,
  "D_Name": "名称9",
  "D_Password": "密码测试9",
  "D_Else": "其他9"
 },
 {
  "rowId": 10,
  "D_Id": 10,
  "D_Name": "名称10",
  "D_Password": "密码测试10",
  "D_Else": "其他10"
 }
]

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

- Author -

smartsmile2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
javascript字符串函数汇总
Dec 06 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
javascript基础知识
Jun 07 #Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 #Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 #Javascript
javascript如何定义对象数组
Jun 07 #Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 #Javascript
bootstrap输入框组代码分享
Jun 07 #Javascript
javascript 数组的定义和数组的长度
Jun 07 #Javascript
requests(1) openpyxl(1) 慢日志(1) 面向对象(3) 相对路径(1) REST(1) Mint UI(1) 相对路径 (1) mt-swipe(1) exists(2)
You might like
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
简单的php文件上传（实例）
2013/10/27 PHP
js有关元素内容操作小结
2011/12/20 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）
2017/07/03 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
详解vue-video-player使用心得（兼容m3u8）
2019/08/23 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
Python 文件重命名工具代码
2009/07/26 Python
Python获取任意xml节点值的方法
2015/05/05 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python SVD压缩图像的实现代码
2019/11/05 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
趣味比赛活动方案
2014/02/15 职场文书
培训专员岗位职责
2014/02/26 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
学会掌握自己命运的十条黄金法则：
2019/08/08 职场文书
优化Mysql查询的示例
2022/04/26 MySQL