文档章节

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

窗棂外的月光
 窗棂外的月光
发布于 2015/03/24 10:37
字数 750
阅读 18
收藏 0
点赞 0
评论 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

原生JS实现最简单的图片懒加载

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

axuebin ⋅ 2017/08/19 ⋅ 0

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

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

SangKa ⋅ 03/07 ⋅ 0

[图片懒加载][Angular]使用Intersection Observer实现图片懒加载并在Angular中使用

链接: https://blog.angularindepth.com/a-modern-solution-to-lazy-loading-using-intersection-observer-9280c149bbc 现如今Web应用的性能如今越来越重要,有一个影响页面加载的很重要因素...

我爱吃南瓜 ⋅ 05/15 ⋅ 0

jQuery页面滚动图片等元素动态加载实现

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

lovethe51cto ⋅ 2016/04/27 ⋅ 0

jQuery页面滚动图片等元素动态加载实现

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

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

jQuery 图片懒加载原理

为什么要懒加载(延迟) 对于图片过多的页面,为了加速页面加载速度, 所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。 这样子对于页面加...

justjavac ⋅ 2014/03/31 ⋅ 1

小程序之图片懒加载[完美方案,你不来看看?]

效果图 既然来了,把妹子都给你。 定义 懒加载,前端人都知道的一种性能优化方式,简单的来说,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒...

an祭 ⋅ 05/16 ⋅ 0

说走就走的性能优化之旅

雅虎规则 熟悉网站优化的开发者应该都知道,只要提到网页性能优化,就绕不开雅虎军规。优化规则&&原文,仔细阅读这些规则,可以总结到3个方面: Http层面上的优化 减少http请求数,http请求c...

乖小鬼YQ ⋅ 2017/11/29 ⋅ 0

懒加载——网页图片的加载技术

目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时,均采用一种称为懒加载的方式。具体表现为:当页面被请求时,只加载可视区域的图片,其他部分图片则不加载,只有这些图片出...

Reya滴水心 ⋅ 2015/11/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部