使用jQuery或者原生js实现鼠标滚动加载页面新数据


Posted in Javascript onMarch 06, 2016

相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入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); 
    }); 
   } 
  }

 

Javascript 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 #Javascript
JavaScript模拟数组合并concat
Mar 06 #Javascript
JavaScript模拟push
Mar 06 #Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 #Javascript
Node.js模块封装及使用方法
Mar 06 #Javascript
JavaScript中三种异步上传文件方式
Mar 06 #Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 #Javascript
You might like
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
webpack打包js的方法
2018/03/12 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python中的asyncio代码详解
2019/06/10 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
C#面试问题
2016/07/29 面试题
幼师专业毕业生自荐信
2013/09/29 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
中秋手机店促销方案
2014/06/16 职场文书
安全生产月标语
2014/10/07 职场文书
民主生活会汇报材料
2014/12/15 职场文书
高一军训决心书
2015/02/05 职场文书
煤矿施工安全协议书
2016/03/22 职场文书