jQuery插件实现网页底部自动加载-类似新浪微博
要实现滚动条滚到底部自动加载后续内容到内容到底部的功能,用jQuery非常方便的,只要知道什么时候滚动到了底部就好办了。
$(document).scrollTop() //获取垂直滚动条到顶部的距离 $(document).height()//整个网页的高度 $(window).height()//浏览器窗口的高度
文档的高度减去窗口的高度就是滚动条可滚动的范围了。那么
$(window).scrollTop() + $(window).height() >= $(document).height()
滚动条就到底部了,我们只要在$(window).scroll()中判断和加载内容就可以了:
$(function(){$(window).scroll(function() {//当内容滚动到底部时加载新的内容if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {//当前要加载的页码LoadPage(currPage);}}); });
代码中的20是我设置的偏移量,如果底部有其它内容,要在看到底部内容时就加载,而不是必须滚动到底部,就需要这个偏移量了,$(this).scrollTop() > 20是为了不让页面还没有滚动就触发加载;至于页面要加载的内容当然是AJAX处理了,都在LoadPage()中处理就行了!
源自:http://www.playcode.cn/jquery-shi-xian-gun-dong-dao-di-bu-zi-dong-jia-zai-nei-rong-gun-dong-fan-ye.html
新浪微博网页自动底部加载的效果很酷吧?其实这种叫做“无限滚动的翻页技术”,当你页面滑到列表底部时候无需点击就自动加载更多的内容。
其实有很多jQuery的插件都已经实现了这个效果,我们来介绍几个吧!
1、jQuery ScrollPagination
jQuery ScrollPagination plugin 是一个jQuery 实现的支持无限滚动加载数据的插件。
地址:http://andersonferminiano.com/jqueryscrollpagination/
他的demo下载:http://andersonferminiano.com/jqueryscrollpagination/jqueryscrollpagination.zip
实例代码:
$(function(){ $('#content').scrollPagination({ 'contentPage': 'democontent.html', // the url you are fetching the results 'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are 'scrollTarget': $(window), // who gonna scroll? in this example, the full window 'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends 'beforeLoad': function(){ // before load function, you can display a preloader div $('#loading').fadeIn(); }, 'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements $('#loading').fadeOut(); var i = 0; $(elementsLoaded).fadeInWithDelay(); if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing) $('#nomoreresults').fadeIn(); $('#content').stopScrollPagination(); } } }); // code for fade in element by element $.fn.fadeInWithDelay = function(){ var delay = 0; return this.each(function(){ $(this).delay(delay).animate({opacity:1}, 200); delay += 100; }); }; });
2、 jQuery Screw
Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件。
官方地址:https://github.com/jasonlau/jQuery-Screw
3. AutoBrowse jQuery Plugin
Autobrowse jQuery Plugin 插件在用户滚动页面的时候自动通过 Ajax 加载更多内容,使用浏览器内置缓存。
官方地址:https://github.com/msjolund/jquery-esn-autobrowse
源自:http://www.makeyuan.com/2014/02/21/1080.html
jQuery插件实现网页底部自动加载-类似新浪微博相关推荐
- JS滚动条到网页底部自动加载更多内容
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030" ...
- C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
- jquery仿邮箱文本输入框自动加载邮箱后缀
jquery仿邮箱文本输入框自动加载邮箱后缀 在像百度这样的网站注册时,你会看到输入邮箱会出现自动给用户输入补全主流邮箱.这种对于增加用户体验的小例子已司空见惯.正好看到人家写的这种js功能.还挺不错 ...
- html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据
一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js . jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCom ...
- 仿新浪微博实现ListBox下拉刷新和到底部自动加载
一.下拉刷新 下拉刷新实现思路: 1.定义一个PullDownToRefreshPanel容器控件.为它添加3种状态模板,分别是PullingDownTemplate,ReadyToReleaseTe ...
- 探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多
在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个 ...
- html5到底部自动加载,列表滚动到底部自动加载更多
列表滚动到底部自动加载更多 在移动端,经常会用到列表滚动到底部,拉一下加载更多,或者点一下加载更多等等,今天我说说我的一个实现的思路. 通过监听列表的滚动时间,当用户滚动到列表的底部,并停留一小段时间 ...
- 滚动到页面底部自动加载内容
上网时经常会看到许多酷炫的网页,其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容,一直都很好奇是怎么样做到的,于是自己也尝试着写了一下. 先上个完整代码吧: <!DOCTYPE html ...
- 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据
今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...
最新文章
- python统计列表内元素个数
- 揭开“云杀毒”的真面目
- mysql 异常关机后 无法查数据_MySQL数据库非法关机造成数据表损坏怎么排查 | 学步园...
- c# dataGridView 设置
- 【云计算的1024种玩法】云端打造家庭文件备份中心
- Excel 用于批量把单元格设置为文本格式保存的数字的宏
- spring--打印hello--注解component--自动创建对象
- CentOS环境下,gdb调试中出现:Missing separate debuginfos, use: debuginfo-install.....的问题
- Linux下高速缓存DNS的配置
- PAT 甲级 1004
- 674. 最长连续递增序列
- Tomcat servers.xml 无注释版
- mysql backup user_mysql备份常见命令
- 21天学通c语言总结(3)
- 这款神器,IDM随意下载任意网页音频视频文件!
- adb 配置自动获取时间 使用GPS提供的时间 使用网络提供的时间
- git添加文件到版本库中
- linux嵌入式reboot不生效,Embeded linux之reboot
- LeetCode 108. 将有序数组转换为二叉搜索树
- 【遇到的问题】VMware Workstation 无法连接到虚拟机。请确保您有权运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录。
热门文章
- 数学 —— 计算几何 —— 平面分割问题
- 信息学奥赛C++语言: 求正整数2和n之间的完全数
- 3.1 SE11创建域
- 组装微型计算机时 下列哪些部件,2016年9月计算机三级网络技术考试试题及答案...
- python flask restful api_python之restful api(flask)获取数据
- hat怎么安装mysql_Red Hat Enterprise Linux中怎么安装Mysql+apache+php+zend
- PyCharm配置Docker
- 操作系统中的一些基本概念
- extjs4.2 前端读取对象的方法
- async js 返回值_获取JavaScript异步函数的返回值