[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 ...
随机推荐
- 【期望DP】BZOJ4008- [HNOI2015]亚瑟王
题目大意 有\(n\)张卡牌,\(r\)轮游戏.每张卡牌只能用至多一次,每张卡牌被用到的概率为\(p_i\).现在从左往右轮,直到最右一张卡片或者某张卡片被用到.如果某张卡牌被用到,产生\(d_i\) ...
- 如何解决…has been modified since the precompiled header… was built的问题
如何解决…has been modified since the precompiled header… was built 的问题 xcode5.1在程序中报错: File '/Applicatio ...
- Dual-polarity supply provides ±12V from one IC
LT1961 升压型稳压器造就了兼具升压和降压能力的扁平状SEPIC Transformerless dc/dc converter produces bipolar outputs Well-reg ...
- 【PHP内存泄漏案例】PHP对象递归引用造成内存泄漏
[案例一] 作者:老王 如果PHP对象存在递归引用,就会出现内存泄漏.这个Bug在PHP里已经存在很久很久了,先让我们来重现这个Bug,代码如下: <?php class Foo { funct ...
- js 面试的坑
JavaScript事件属性event.target <!DOCTYPE html> <html> <head> <meta charset="UT ...
- OpenERP实施记录(12):付款处理
本文是<OpenERP实施记录>系列文章的一部分. 1. 在前面的文章中,采购订单确认时自动生成了供应商发票,可以在 会计 > 供应商列表 > 供应商发票 查询,状态为&quo ...
- 【spring cloud】spring boot2.x下 使用feign,注解@EnableFeignClients 找不到的解决方法
spring boot2.x下 使用feign,注解@EnableFeignClients 找不到的解决方法 在spring boot1.x下,使用注解@EnableFeignClients,jar包 ...
- Appium+python自动化22-Appium Desktop
Appium Desktop 原滋原味的官方文档 Appium Desktop是一款用于Mac.Windows和Linux的开源应用,它提供了Appium自动化服务器在一个漂亮灵活的UI中的强大功能. ...
- [翻译] POP Facebook的动画开源库
Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it s ...
- [Android Studio] Android Studio移除的Module如何恢复(转载)
如果你执行了从module列表中移除module的操作,但是没有执行delete module文件夹的操作,那如何恢复被移除掉的module呢. 关于如何移除请戳这:Android Studio如何删 ...