上拉页面自动加载
2015-08-05 16:01
471 查看
本人也是菜鸟一个,初接触web前端,有错的地方,请喷我的同时,告诉我错在哪里!谢谢
我写随笔是主要是为了总结所学知识,同时方便以后的查阅。
不管是pc端,还是手机端,都有一种上拉页面自动加载的效果。当用户浏览到页面底部时,网速慢的时候会看见“正在加载中...”的字样,那是因为用户从一开始访问页面时,web服务器只返回一部分的内容,只有当页面检测到用户浏览到底部时,才会发送新的请求更多的内容。这就是上拉页面自动加载!至于说为什么是上拉呢,是因为网页是向上移动的,看上去就像是被拉上去了一样。
上拉页面主要用在瀑布流布局中
要实现下拉页面自动加载的关键就是检测到用户已经浏览到页面底部了!
首先要明白网页文档、浏览器窗口两者的区别和联系。
网页文档也就是html文档,一般它比浏览器窗口要高的多,所以才会出现滚动条,让我们滚动网页浏览内容的。
设想一种情况,当浏览器滚动条在中间时,我们发现此时网页文档被浏览器窗口分成了三部分。第一部分是目前正在看内容,即浏览器窗口高宽容纳的内容;第二部分是已经看过的内容,即被滚动条拉上去的内容;第三部分还未看到的内容,即滚动条下面的内容。
从上面的描述我们能想象,当未看内容高度为0时,即已看内容+正在看的内容=全部的网页内容,就表示用户浏览完了当前网页的全部内容了,这时就需要我们体谅用户的需求,自动加载更多的内容了。
正在看的内容高度 = $(window).height()
已看内容的高度 = $(window).scrollTop()
全部网页内容的高度 = $(document).height()
if(($(window).height()+$(window).scrollTop()) == $(document).height()){
//加载更多的数据
}
我写随笔是主要是为了总结所学知识,同时方便以后的查阅。
不管是pc端,还是手机端,都有一种上拉页面自动加载的效果。当用户浏览到页面底部时,网速慢的时候会看见“正在加载中...”的字样,那是因为用户从一开始访问页面时,web服务器只返回一部分的内容,只有当页面检测到用户浏览到底部时,才会发送新的请求更多的内容。这就是上拉页面自动加载!至于说为什么是上拉呢,是因为网页是向上移动的,看上去就像是被拉上去了一样。
上拉页面主要用在瀑布流布局中
要实现下拉页面自动加载的关键就是检测到用户已经浏览到页面底部了!
首先要明白网页文档、浏览器窗口两者的区别和联系。
网页文档也就是html文档,一般它比浏览器窗口要高的多,所以才会出现滚动条,让我们滚动网页浏览内容的。
设想一种情况,当浏览器滚动条在中间时,我们发现此时网页文档被浏览器窗口分成了三部分。第一部分是目前正在看内容,即浏览器窗口高宽容纳的内容;第二部分是已经看过的内容,即被滚动条拉上去的内容;第三部分还未看到的内容,即滚动条下面的内容。
从上面的描述我们能想象,当未看内容高度为0时,即已看内容+正在看的内容=全部的网页内容,就表示用户浏览完了当前网页的全部内容了,这时就需要我们体谅用户的需求,自动加载更多的内容了。
正在看的内容高度 = $(window).height()
已看内容的高度 = $(window).scrollTop()
全部网页内容的高度 = $(document).height()
if(($(window).height()+$(window).scrollTop()) == $(document).height()){
//加载更多的数据
}
相关文章推荐
- 全民消消乐电信SDK对接
- Linux IO实时监控iostat命令详解
- 学习日记8.5
- 关于命令行参数
- 生成framework ,脚本
- 求位数 hdu 1018 Big Number
- android 读取本地大图片时防止oom方法
- linux下vi的复制,黏贴,删除,撤销,跳转等命令-费元星
- 如何安装虚拟机VMware
- zoj 3135 Party of 8g 最大点权独立集
- linux epoll事件模型详解(转载)
- 杭电acm 2504又见GCD
- DP ACdream 喵哈哈村的挑衅
- android 自定义ScrollView实现背景图片伸缩(阻尼效果)
- ios基础-字符串和数组的block遍历
- LeetCode之Binary Tree Inorder Traversal
- 使用php-java-bridge让PHP5支持java
- C#高级编程七十一天----DLR ScriptRuntime
- Hadoop集群(第9期)_MapReduce初级案例
- android 自定义ScrollView实现背景图片伸缩(阻尼效果)