文档章节

Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

深圳大道
 深圳大道
发布于 2016/12/29 15:35
字数 733
阅读 28
收藏 0
<!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"
  }
]

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/39343361

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

Farbtastic Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic jQuery Color Picker 21世纪开...

晨曦之光
2012/03/09
452
0
10 个支持列表无限滚动的 jQuery 插件

很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容。 下面为你推荐 10 个 jQuery 的无限滚动的插件...

oschina
2012/05/29
19K
11
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
9.3K
6
5、6 月份的 10 个最佳 jQuery 插件

1) jQuery Popeye jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图 片添加备注...

oschina
2013/06/18
7.1K
16
jQuery页面滚动图片等元素动态加载实现

一、关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说光棍节很疯狂的淘宝商城页面。 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类...

凯文加内特
2014/03/18
127
0

没有更多内容

加载失败,请刷新页面

加载更多

家庭作业——苗钰婷

2 编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound, Sally shouted, "By the Great Pumpkin, what was that! #include<stdio.h>int main(){......

OSC_Okruuv
26分钟前
5
0
经典系统设计面试题解析:如何设计TinyURL(一)

原文链接: https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
27分钟前
3
0
2.面向对象设计原则(7条)

开闭原则 开闭原则的含义是:当应用的需求改变时,在不修改软件实体的源代码或者二进制代码的前提下,可以扩展模块的功能,使其满足新的需求。 实现方法 可以通过“抽象约束、封装变化”来实...

Eappo_Geng
29分钟前
7
0
8086汇编基础 debug P命令 一步完成loop循环

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
33分钟前
5
0
使用nodeJS实现前端项目自动化之项目构建和文件合并

本文转载于:专业的前端网站➜使用nodeJS实现前端项目自动化之项目构建和文件合并 前面的话   一般地,我们使用构建工具来完成项目的自动化操作。本文主要介绍如何使用nodeJS来实现简单的项...

前端老手
47分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部