[JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
本人小菜鸟一仅仅。为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群。希望光临本博客的人能够进来交流。寻求共同发展。
搭建平台。
本人博客也有很多的技术文档。希望能够为你提供一些帮助。
QQ群: 191848169 QQ:450225664
页面滚动动态载入数据,页面下拉自己主动载入内容
相信非常多人都见过瀑布流图片布局,那些图片是动态载入出来的,效果非常好,对server的压力相对来说也小了非常多
有手机的相信都见过这种效果:进入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为内容可视区域的高度。
[JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件的更多相关文章
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- JS前端开发判断是否是手机端并跳转操作(小结)
JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- Saiku控制页面展示的数据过长自动换行(二十四)
Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...
- FIS.js前端开发的使用说明文档
文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 一.什么是FIS FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构 ...
- JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!
前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!2016-09-29 17 ...
随机推荐
- 【二项式定理】【DFS】UVALive - 7639 - Extreme XOR Sum
题意:一个序列,q次询问,每次问你某个指定区间内的EXtreme XOR值. 一个长度为l的区间的EXtreme XOR值被定义为,从左到右,将每相邻的两个数XOR起来,产生l-1个新的值,……如此循 ...
- python3-开发进阶Flask的基础(4)
今日内容: 上下文管理:LocalProxy对象 上下文管理: 请求上下文: request/session app上下文:app/g 第三方组件:wtforms 1.使用 ...
- Unity JsonFx 插件使用
在Unity中使用 JsonFx 插件笔记(提示:以下在 Unity3D v5.4.0 版本 Win 平台下测试成功) 下载 JsonFx 插件注意:JsonFx 插件其实就是一个 dll 文件(如果 ...
- HDU 4618 Palindrome Sub-Array 暴力
Palindrome Sub-Array 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=4618 Description A palindrome s ...
- 不错的VS2010扩展——JSEnhancements,让js和css也折叠
在Visaul Studio 2010中写js或css代码,缺少像写C#代码时的那种折叠功能,当代码比较多时,就很不方便. 今天发现,已经有VS2010扩展支持这个功能,它就是——JSEnhancem ...
- asp动态数组
本文所说的 ASP 数组是指在 ASP 中以默认语言 VBScript 为语言的数组. 样例: Dim MyArray() for i = 0 to 10 ...
- ssh 远程登陆指定端口
ssh 到指定端口 ssh -p xx user@ip xx 为 端口号 user为用户名 ip为要登陆的ip SSH 原理及远程登录 http://www.ruanyifeng ...
- Andorid之Annotation框架初使用(三)
线程使用: @Background这个是使用了cached thread pool executor , 阻止开启过多的线程 可以为@Background指定一个id,用于随时终止线程的操作(Back ...
- cocos2d-x v3.0新特性及使用
八月份cocos2d-x官网发布了v3.0版本,这次更新的内容特别多,包括2dx的架构以及使用 总得来说,给开发者带来了很大的便利: 运行环境需求: Android 2.3 or newer iOS ...
- OpenShift和F5的集成手册
OpenShift和F5的集成步骤,记录如下,如实际操作中有变更会再度编辑修改. 1.整体架构 使用BIG-IP作为Openshift的Router,能实现以下功能: 为Services创建BIG-I ...