zoukankan      html  css  js  c++  java
  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 

    有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 

    今天我们就来看看他们的实现思路和js控制动态加载的代码

    原理:

    就是为 window 添加一个 scroll事件 ,浏览器每次触发 scroll事件 时判断是否滚动到了浏览器底部,如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,算法如下:

     滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/ 

    如果这个判断为 true 则表示滚动条滚动到了底部。



    下面的代码主要是控制滚动条下拉时的加载事件的

    在下面代码说明处,写上你的操作即可,无论是加载图片还是加载记录数据  都可以  

    别忘了引用 jquery 类库

     1  $(window).scroll(function () {
     2         var scrollTop = $(this).scrollTop();
     3         var scrollHeight = $(document).height();
     4         var windowHeight = $(this).height();
     5         if (scrollTop + windowHeight == scrollHeight) {
     6 
     7            //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
     9            //var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
    10            //redgiftList(page);
    11            //$("#redgiftNextPage").attr('currentpage', page + 1);

            var index=$("#my-modal-loading").layer.load('1');//开始加载动画

                    $.ajax({
                        type: 'get',
                        url: 'xxxxxxxxxx',
                        data:{
                            xxx: 'xxx',
                            xxx: xxx
                        },
                        dataType: 'json',
                        error: function(request) {
                            alert('查找失败!');
                        },
                        success: function(data){
                            //console.log(data);
                            //数据加载

                  //结束加载动画

                  $("#my-modal-loading").layer.close(index);

                }

               });

    13         }
    14     });

    解析:

    判断滚动条到底部,需要用到 DOM 的三个属性值,即 scrollTop、clientHeight、scrollHeight 。

     scrollTop 为滚动条在Y轴上的滚动距离。

     clientHeight 为内容可视区域的高度。

     scrollHeight 为内容可视区域的高度加上溢出(滚动)的距离。

    从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为 scrollTop + clientHeight == scrollHeight 。(兼容不同的浏览器)。

  • 相关阅读:
    第一周2016/9/16
    团队项目计划会议
    电梯演讲视频
    团队项目成员与题目(本地地铁查询app)
    地铁查询相关问题汇总
    延长zencart1.5.x后台的15分钟登录时间和取消90天强制更换密码
    zencart1.5.x版管理员密码90天到期后台进入不了的解决办法
    通过SSH解压缩.tar.gz、.gz、.zip文件的方法
    html标签被div嵌套页面字体变大的解决办法
    zencart批量插入TEXT文本属性attributes
  • 原文地址:https://www.cnblogs.com/liaobeifeng/p/7065260.html
Copyright © 2011-2022 走看看