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

$(function(){$("#tb").scroll(function(){//内容滚动的DivvardivHeight=$(this).height();//这个Div的高度varnScroll

$(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的，但是感觉这个更简单