使用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 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
JavaScript实现点击图片换背景
Nov 20 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
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
Python多线程实例教程
2014/09/06 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
Python3常用内置方法代码实例
2019/11/18 Python
wxPython实现绘图小例子
2019/11/19 Python
python爬取youtube视频的示例代码
2021/03/03 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
学校门卫岗位职责
2014/03/16 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
项目合作协议书
2014/09/23 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
放牛班的春天观后感
2015/06/01 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
民主生活会主持词
2015/07/01 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
Python读取和写入Excel数据
2022/04/20 Python