jquery实现页面滚动时自动加载内容
类别:Web前端 浏览量:1626
时间:2013-9-17 jquery实现页面滚动时自动加载内容
jquery实现页面滚动时自动加载内容我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,其实现原理一般是:通过ajax提交到服务器,然后返回一个信息,是否成功,如果成功了。就使用Dom来把当前的内容,插入到原本的内容后面。
实例代码:
var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == false){ loading = true; $('#loadingbar').css("display","block"); $.get("url?start="+$('#loaded_max').val(), function(loaded){ $('body').append(loaded); $('#loaded_max').val(parseInt($('#loaded_max').val())+50); $('#loadingbar').css("display","none"); loading = false; }); } } }); $(document).ready(function() { $('#loaded_max').val(50); });
您可能感兴趣
- jquery中prop和attr的区别
- jQuery如何跳出each循环
- jquery图片轮播代码
- jQuery对象和DOM的相互转换
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- javascript中还原append代码(JS实现jQuery的append功能)
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- jquery插件写法
- jqueryajax实现部分刷新(php+jQuery ajax实现的实时刷新显示数据功能示例)
- jquery中find()与filter()的区别
- jQuery邮箱自动补全
- jquery next()
- JQuery中serialize与serializeArray
- 链式编程jquery(实例详解jQuery的链式编程风格)
- jquery修改带有!important的样式
- Jquery实现table表格行的添加、删除
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
热门推荐
- python实现层次遍历二叉树(Python实现的序列化和反序列化二叉树算法示例)
- docker端口映射和暴露端口的区别(解决docker指定udp端口号的问题)
- html5浏览界面怎么设置(HTML5textarea高度自适应的两种方案)
- vsftpd详细配置(vsftpd匿名用户上传和下载的配置方法)
- laravel常用的辅助函数介绍(Laravel框架表单验证操作实例分析)
- Visual Studio中 sln 和 suo 文件
- sql分析命令(详解SQL中的DQL查询语言)
- pythonsocket建立多用户通讯(Python socket实现多对多全双工通信的方法)
- jQuery邮箱自动补全
- php在if里添加xml代码(PHP创建XML接口示例)