足球游戏_中国足彩网¥体育资讯$

使用jQuery或者原生js实现鼠标滚动加载页面新数据
来源:易贤网 阅读:821 次 日期:2016-08-02 14:14:35
温馨提示:易贤网小编为您整理了“使用jQuery或者原生js实现鼠标滚动加载页面新数据”,方便广大网友查阅!

相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码。

下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据  都可以。

加载jQuery库后我们可以这样使用:  

$(window).scroll(function () {

    var scrollTop = $(this).scrollTop();

    var scrollHeight = $(document).height();

    var windowHeight = $(this).height();

    if (scrollTop + windowHeight == scrollHeight) {

   //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;

//redgiftList(page);

//$("#redgiftNextPage").attr('currentpage', page + 1);

    }

  });

解析:

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

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

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

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

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。 

纯js我们可以这样做: 

window.onscroll = function() { 

   var scrollTop = document.body.scrollTop; 

   var offsetHeight = document.body.offsetHeight; 

   var scrollHeight = document.body.scrollHeight; 

   if (scrollTop == scrollHeight - offsetHeight) { 

    page++; 

    loadList(page); 

   } 

  }; 

function loadList(page) { 

   page = page || 1; 

   if (isLoad) { 

    getJSON('/forum.php?mod=hot&page=' + page).then(function(data) { 

     if (data.code == 200) { 

      data = data.data; 

      if (data && Object.keys(data).length > 0) { 

       for (var k in data) { 

        var v = data[k]; 

        detailTemplate = detailTemplate.cloneNode(true); 

        var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; 

        userInfoObj.getElementsByClassName('name')[0].innerText = v.author; 

        userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; 

        userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; 

        detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; 

        detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; 

        var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; 

        extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; 

        extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; 

        postListObj.appendChild(detailTemplate); 

       } 

      } else { 

       isLoad = false; 

      } 

     } else { 

      isLoad = false; 

     } 

    }, function(status) { 

     console.log('Something went wrong, status is ' + status); 

    }); 

   } 

  }

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标