文档章节

一个根据滚动加载的页面(类似懒加载)

窗棂外的月光
 窗棂外的月光
发布于 2015/03/24 10:37
字数 750
阅读 18
收藏 0
$(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的,但是感觉这个更简单





© 著作权归作者所有

共有 人打赏支持
窗棂外的月光
粉丝 0
博文 1
码字总数 750
作品 0
无锡
原生JS实现最简单的图片懒加载

试一下自己撸一个图片懒加载... Demo地址:axuebin.com/lazyload 源码地址:github.com/axuebin/laz… 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优...

axuebin
2017/09/27
0
0
原生JS实现最简单的图片懒加载

原文地址:原生JS实现最简单的图片懒加载 欢迎star。 如果有错误的地方欢迎指正。 Demo地址:http://axuebin.com/lazyload 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载...

axuebin
2017/08/19
0
0
微信小游戏排行榜页滚动查看排行榜(canvas指定区域溢出滚动,懒渲染)

     在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系...

eccainiao
07/31
0
0
[译] 使用响应式编程来实现简易版的无限滚动加载

原文链接: hackernoon.com/naive-infin… 本文为 RxJS 中文社区 翻译文章,如需转载,请注明出处,谢谢合作! 如果你也想和我们一起,翻译更多优质的 RxJS 文章以奉献给大家,请点击【这里】...

SangKa
03/07
0
0
浅谈Vue-router的部分高级用法

前言 大家好久不见,上周没来得及写文章,这周终于有时间发布文章了,还是很开心的,至于这篇文章的内容大家就可以看出来不会有很多,并且针对的是已经有初步了解Vue-router的人,好了进入正...

大湿兄
08/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部