上拉页面自动加载
本人也是菜鸟一个,初接触web前端,有错的地方,请喷我的同时,告诉我错在哪里!谢谢
我写随笔是主要是为了总结所学知识,同时方便以后的查阅。
不管是pc端,还是手机端,都有一种上拉页面自动加载的效果。当用户浏览到页面底部时,网速慢的时候会看见“正在加载中...”的字样,那是因为用户从一开始访问页面时,web服务器只返回一部分的内容,只有当页面检测到用户浏览到底部时,才会发送新的请求更多的内容。这就是上拉页面自动加载!至于说为什么是上拉呢,是因为网页是向上移动的,看上去就像是被拉上去了一样。
上拉页面主要用在瀑布流布局中
要实现下拉页面自动加载的关键就是检测到用户已经浏览到页面底部了!
首先要明白网页文档、浏览器窗口两者的区别和联系。
网页文档也就是html文档,一般它比浏览器窗口要高的多,所以才会出现滚动条,让我们滚动网页浏览内容的。
设想一种情况,当浏览器滚动条在中间时,我们发现此时网页文档被浏览器窗口分成了三部分。第一部分是目前正在看内容,即浏览器窗口高宽容纳的内容;第二部分是已经看过的内容,即被滚动条拉上去的内容;第三部分还未看到的内容,即滚动条下面的内容。
从上面的描述我们能想象,当未看内容高度为0时,即已看内容+正在看的内容=全部的网页内容,就表示用户浏览完了当前网页的全部内容了,这时就需要我们体谅用户的需求,自动加载更多的内容了。
正在看的内容高度 = $(window).height()
已看内容的高度 = $(window).scrollTop()
全部网页内容的高度 = $(document).height()
if(($(window).height()+$(window).scrollTop()) == $(document).height()){
//加载更多的数据
}