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"
 }
]
Javascript 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 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
You might like
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
学习js所必须要知道的一些
2007/03/07 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
Python中的getopt函数使用详解
2015/07/28 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python求质数的3种方法
2018/09/28 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python 没有main函数的原因
2020/07/10 Python
python 制作磁力搜索工具
2021/03/04 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
公司委托书范本5篇
2014/09/20 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
介绍信格式样本
2015/05/05 职场文书
家长会后的感想
2015/08/11 职场文书
修辞手法有哪些?
2019/08/29 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
关于mysql中string和number的转换问题
2022/06/14 MySQL