本人小菜鸟一仅仅。为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群。希望光临本博客的人能够进来交流。寻求共同发展。

搭建平台。

本人博客也有很多的技术文档。希望能够为你提供一些帮助。



QQ群:   191848169               QQ:450225664



页面滚动动态载入数据,页面下拉自己主动载入内容



相信非常多人都见过瀑布流图片布局,那些图片是动态载入出来的,效果非常好,对server的压力相对来说也小了非常多



有手机的相信都见过这种效果:进入qq空间。向下拉动空间,究竟部时,会动态载入剩余的说说或者是日志



今天我们就来看看他们的实现思路和js控制动态载入的代码



以下的代码主要是控制滚动栏下拉时的载入事件的



在以下代码说明出。写上你的操作就可以。不管是载入图片还是载入记录数据  都能够  



别忘了引用jquery类库

[JavaScript]
纯文本查看 复制代码
    $(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控制页面动态载入数据 滑动滚动栏自己主动载入事件的更多相关文章

  1. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  2. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  3. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  4. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  5. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  6. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  7. Saiku控制页面展示的数据过长自动换行(二十四)

    Saiku控制页面展示的数据过长自动换行 目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦 首先我们使用谷歌浏览器 inspect ...

  8. FIS.js前端开发的使用说明文档

    文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 一.什么是FIS FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构 ...

  9. JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!

    前端开发一些常用技巧               模块化结构       &&&&&     命名空间处理 奇技淫巧!!!!!!2016-09-29    17 ...

随机推荐

  1. 【期望DP】BZOJ4008- [HNOI2015]亚瑟王

    题目大意 有\(n\)张卡牌,\(r\)轮游戏.每张卡牌只能用至多一次,每张卡牌被用到的概率为\(p_i\).现在从左往右轮,直到最右一张卡片或者某张卡片被用到.如果某张卡牌被用到,产生\(d_i\) ...

  2. 如何解决…has been modified since the precompiled header… was built的问题

    如何解决…has been modified since the precompiled header… was built 的问题 xcode5.1在程序中报错: File '/Applicatio ...

  3. Dual-polarity supply provides ±12V from one IC

    LT1961 升压型稳压器造就了兼具升压和降压能力的扁平状SEPIC Transformerless dc/dc converter produces bipolar outputs Well-reg ...

  4. 【PHP内存泄漏案例】PHP对象递归引用造成内存泄漏

    [案例一] 作者:老王 如果PHP对象存在递归引用,就会出现内存泄漏.这个Bug在PHP里已经存在很久很久了,先让我们来重现这个Bug,代码如下: <?php class Foo { funct ...

  5. js 面试的坑

    JavaScript事件属性event.target <!DOCTYPE html> <html> <head> <meta charset="UT ...

  6. OpenERP实施记录(12):付款处理

    本文是<OpenERP实施记录>系列文章的一部分. 1. 在前面的文章中,采购订单确认时自动生成了供应商发票,可以在 会计 > 供应商列表 > 供应商发票 查询,状态为&quo ...

  7. 【spring cloud】spring boot2.x下 使用feign,注解@EnableFeignClients 找不到的解决方法

    spring boot2.x下 使用feign,注解@EnableFeignClients 找不到的解决方法 在spring boot1.x下,使用注解@EnableFeignClients,jar包 ...

  8. Appium+python自动化22-Appium Desktop

    Appium Desktop 原滋原味的官方文档 Appium Desktop是一款用于Mac.Windows和Linux的开源应用,它提供了Appium自动化服务器在一个漂亮灵活的UI中的强大功能. ...

  9. [翻译] POP Facebook的动画开源库

    Pop is an extensible animation engine for iOS and OS X. In addition to basic static animations, it s ...

  10. [Android Studio] Android Studio移除的Module如何恢复(转载)

    如果你执行了从module列表中移除module的操作,但是没有执行delete module文件夹的操作,那如何恢复被移除掉的module呢. 关于如何移除请戳这:Android Studio如何删 ...