一个根据滚动加载的页面（类似懒加载）

$(function() {
        $("#tb").scroll(function(){//内容滚动的Div
            var divHeight = $(this).height();//这个Div的高度
            var nScrollHeight = $(this)[0].scrollHeight;//Div中内容的高度
            var nScrollTop = $(this)[0].scrollTop;//滚动的高度
            if(nScrollTop + divHeight >= nScrollHeight) {//滚动到底
                //alert("到达底部了");
                var pageNumber = $("#pageNumber").val();
                var totalPage = $("#totalPage").val();
                var page = parseInt(pageNumber);
                if(pageNumber==totalPage){
                    $("#footer").empty().text("真的到底啦....").slideDown(200);//提示信息
                }else{
                    ajaxPost(page+1);//加载下一页
                }
            }
        });
    });

滚动监听

加载下一页，将Ajax取得的数据拼接到内容中

function ajaxPost(pageNumber){
        $.ajax({
            url: $("base").attr("href")+'tclassLog/getClassLogs',//地址
            type: "post",
            async: false,
            cache: false,
            data: {classCode:$("#classCode").val(), page: pageNumber},//参数
            dataType: "json",
            timeout: 5000,
            success: function(result) {
                if(!checkEmpty(result))
                    if(typeof(result) == "string")
                        showAlertInfo(result);//如果是报错信息，打印报错信息（可以无视）
                    else
                        appendPost(result);//拼接内容
                else
                    if(pageNumber == 1)
                        $("#footer").empty().text("还没有日志，快来添加吧...");//没有查到内容，默认页数为1.这个是用jFinal中的Page分页的
                    else
                        $("#footer").empty().text("真的到底啦...");//其他页数没有查到内容
            },
            error: function() {
                if(pageNumber == 1)
                    $("#footer").empty().text("网速君不给力....").slideDown(200);//未知情况
                else
                    $("#footer").empty().text("真的到底啦...").slideDown(200);//未知情况
                    
            }
        });
    }

内容拼接

    var classCode = $("#classCode").val();
    var content = "<div class='classlog'><div class='classlog_left'><div><p class='classcontent'>";
    var create = "</p></div><div><span>";
    var time = "</span><span class='classcreate'>&nbsp;&nbsp;创建于&nbsp;&nbsp;</span><span class='classtime'>";
    var deleted = "</span></div></div><div class='classlog_right'><div class='class_left'><a href=\"javascript:deleteClassLog('";
    var adn1 = "','";
    var update = "')\"><span class='glyphicon glyphicon-trash' title='删除'></span></a></div><div class='class_right'><a href=\"tclassLog/modifyClassLog?classCode=";
    var adn2 = "&logId=";
    var end = "\">    <span class='glyphicon glyphicon-pencil' title='编辑'></span></a></div></div></div><div style='height:5px;'></div>";
    
    function appendPost(result){
        var posts = result.list;
        if(posts.length == 0){
            $("#footer").empty().text("没有更多数据...").slideDown(200);
        }else{
            $("#footer").remove();//先去除底部的提示块
            setTimeout(function(){
                for (var i = 0; i < posts.length; i++) {
                    var post = posts[i];
                    var post_dom = $("#tb");
                    post_dom.append(content+post.content+create+post.creater+time+post.createTime+deleted+classCode+adn1+post.logId+update+classCode+adn2+post.logId+end);
                }
                //内容拼好后，添加底部的提示块
                $("#tb").append("<div id='footer' class='footer'><i class='loading_i'></i><span class='loading_text'>正在加载，请稍候...</span></div>");
                autoWinHeight();
            }, 500);
            $("#pageNumber").val(result.pageNumber);
            $("#totalPage").val(result.totalPage);
        }
    }

Div tb的显示

<div id="tb" class="body_content">
        <c:if test="${!empty pg.list}">
        <input type="hidden" id="classCode" value="${classCode}"/> 
        <input type="hidden" id="pageNumber" value="${pg.pageNumber}"/> 
        <input type="hidden" id="totalPage" value="${pg.totalPage}"/> 
            <c:forEach items="${pg.list}" var="log" varStatus="s">
                <div class="classlog">
                    <div class="classlog_left">
                        <div>
                            <p class="classcontent" >${log.content}</p>
                        </div>
                        <div>
                            <span>${log.creater}</span>
                            <span class="classcreate">&nbsp;&nbsp;创建于&nbsp;&nbsp;</span> 
                            <span class="classtime">${log.createTime}</span>
                        </div>
                    </div>
                    <div class="classlog_right">
                        <div class="class_left">
                            <a href="javascript:deleteClassLog('${classCode}','${log.logId}')">
                                <span class="glyphicon glyphicon-trash" title="删除"></span>
                            </a>
                        </div>
                        <div class="class_right">
                            <a href="tclassLog/modifyClassLog?classCode=${classCode}&logId=${log.logId}">
                                   <span class="glyphicon glyphicon-pencil" title="编辑"></span>
                               </a>
                        </div>
                    </div>
                </div>
                <div style="height:5px;"></div>
            </c:forEach>
            <div id="footer" class="footer">
                <i class="loading_i"></i><span>正在加载，请稍候...</span>
            </div>
        </c:if>
        <c:if test="${empty pg.list}">
            <div style="width:100%;margin:auto auto;padding-top:10px;background-color: #fff;min-height: 30px;">
                <P align="center">
                    暂无教育日志数据
                </P>
            </div>
        </c:if>
    </div>

这个核心就是滚动监听，到底部（或距底部一段距离提前加载）时，加载下一页。

最近用到这个，开始想用jquery.lazyload.js的，但是感觉这个更简单

转载于:https://my.oschina.net/u/2275735/blog/390703