对于JQ实现网页翻页到底部自动加载的问题

原创 2017年04月23日 12:37:25

对于长文章,我们喜欢使用第一次加载一小部分,翻页到底部后自动加载下一页,可以给用户更好的体验。


注:用到了jquery

具体实现方法:


1.引入jquery:

 <script type="text/javascript" src="js/jquery.min.js"></script>

2.绑定翻页事件

$(window).scroll(function () {loadmore($(this));});

3.确定翻页到指定位置:

        var flag = true;                                                //标志,确定达到之后则停止,为了同时只进行一次加载操作
        function loadmore(obj) {
            var scrollTop = $(obj).scrollTop();                         //目前所在的位置
            var scrollHeight = $(document).height();                    //文章一共有多长
            var windowHeight = $(obj).height();                         //一页一共有多长
            if (scrollHeight - (scrollTop + windowHeight) <= 20) {      //20的意思是预留长度,总不能翻页到最底下才加载把~
                if (flag) {
                    alert(1);                                           //到底了在这里请求新的一页,这里可以放ajax获取新一页
                    flag = false;                                       //只执行一次
                }
            }
        }

4.大功告成
版权声明:本文为博主原创文章,未经博主允许不得转载。

web前端,实现上下翻页,支持鼠标滑动翻页h5+css+jq

源码下载:
  • zhaihaohao1
  • zhaihaohao1
  • 2015年10月01日 21:01
  • 3475

js/jquery控制页面滑动到底部时自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空...
  • sinat_29325027
  • sinat_29325027
  • 2016年11月30日 11:16
  • 5554

js页面滚动到底部时自动加载下一页数据

一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js 、 jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSi...
  • gaoxu529
  • gaoxu529
  • 2016年03月09日 17:09
  • 3593

jquery 滚动到底部时自动加载更多

  • 2016年12月21日 10:43
  • 219KB
  • 下载

页面自动执行(加载)js的几种方法

一、JS方法 1.最简单的调用方式,直接写到html的body标签里面: 1 2 body onload="myfunction()"> html> ...
  • zdnlp
  • zdnlp
  • 2013年11月06日 17:48
  • 135918

Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

滚屏加载--无刷新动态加载数据技术的应用-www.corange.cn #container{margin:10px auto;width: 660px; border: 1px solid #99...
  • jimlong
  • jimlong
  • 2014年11月15日 00:54
  • 23978

jquery实现滑动到底部加载下一页的数据

为了减少页面的加载量和页面的呈现速度,不是所有的内容都需要在第一时间在家给用户看。用户在浏览第一屏内容的时候,那么加载第一屏以下的内容不是很有必要的,当用户在浏览页面时,动态地按需加载即可。也就是当滑...
  • killer_mamiao
  • killer_mamiao
  • 2017年10月13日 20:09
  • 331

Js(JQuery)实现滚动到底部加载更多(翻页)

$(window).scroll(function () { var scrollTop = $(this).scrollTop();        var scrollHeight = $(do...
  • Elite_1989
  • Elite_1989
  • 2015年10月13日 10:57
  • 3062

javaScript和jQuery自动加载方法

一、JavaScript自动加载 ①在文本中用onload: 页面中所有内容(包括图片)加载完成才执行。 //当有一个onload //当有多个onloa...
  • namejs
  • namejs
  • 2016年03月14日 14:12
  • 4031

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

滚动到页面顶部加载 .mainDiv { width: 800px; borde...
  • smartsmile2012
  • smartsmile2012
  • 2014年09月17日 15:29
  • 26619
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:对于JQ实现网页翻页到底部自动加载的问题
举报原因:
原因补充:

(最多只允许输入30个字)