本人小菜鸟一仅仅。为了自我学习和交流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. 【二项式定理】【DFS】UVALive - 7639 - Extreme XOR Sum

    题意:一个序列,q次询问,每次问你某个指定区间内的EXtreme XOR值. 一个长度为l的区间的EXtreme XOR值被定义为,从左到右,将每相邻的两个数XOR起来,产生l-1个新的值,……如此循 ...

  2. python3-开发进阶Flask的基础(4)

    今日内容: 上下文管理:LocalProxy对象 上下文管理:  请求上下文: request/session   app上下文:app/g 第三方组件:wtforms       1.使用      ...

  3. Unity JsonFx 插件使用

    在Unity中使用 JsonFx 插件笔记(提示:以下在 Unity3D v5.4.0 版本 Win 平台下测试成功) 下载 JsonFx 插件注意:JsonFx 插件其实就是一个 dll 文件(如果 ...

  4. HDU 4618 Palindrome Sub-Array 暴力

    Palindrome Sub-Array 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=4618 Description A palindrome s ...

  5. 不错的VS2010扩展——JSEnhancements,让js和css也折叠

    在Visaul Studio 2010中写js或css代码,缺少像写C#代码时的那种折叠功能,当代码比较多时,就很不方便. 今天发现,已经有VS2010扩展支持这个功能,它就是——JSEnhancem ...

  6. asp动态数组

    本文所说的 ASP 数组是指在 ASP 中以默认语言 VBScript 为语言的数组. 样例: Dim   MyArray()        for   i   =   0   to   10    ...

  7. ssh 远程登陆指定端口

    ssh 到指定端口  ssh -p xx user@ip      xx 为 端口号    user为用户名   ip为要登陆的ip SSH 原理及远程登录 http://www.ruanyifeng ...

  8. Andorid之Annotation框架初使用(三)

    线程使用: @Background这个是使用了cached thread pool executor , 阻止开启过多的线程 可以为@Background指定一个id,用于随时终止线程的操作(Back ...

  9. cocos2d-x v3.0新特性及使用

    八月份cocos2d-x官网发布了v3.0版本,这次更新的内容特别多,包括2dx的架构以及使用 总得来说,给开发者带来了很大的便利: 运行环境需求: Android 2.3 or newer iOS ...

  10. OpenShift和F5的集成手册

    OpenShift和F5的集成步骤,记录如下,如实际操作中有变更会再度编辑修改. 1.整体架构 使用BIG-IP作为Openshift的Router,能实现以下功能: 为Services创建BIG-I ...