使用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父窗口控制只弹出一个子窗口
Apr 10 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
prototype.js常用函数详解
Jun 18 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
JavaScript实现简单轮播图效果
2018/12/01 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Django通过json格式收集主机信息
2020/05/29 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
降低python版本的操作方法
2020/09/11 Python
python os.listdir()乱码解决方案
2021/01/31 Python
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书