上拉頁面自動加載

本人也是菜鳥一個，初接觸web前端，有錯的地方，請噴個人同時，告訴我錯在哪裏！謝謝

我寫隨筆是主要是爲了總結所學知識，同時方便之後的查閱。

無論是pc端，仍是手機端，都有一種上拉頁面自動加載的效果。當用戶瀏覽到頁面底部時，網速慢的時候會看見「正在加載中...」的字樣，那是由於用戶從一開始訪問頁面時，web服務器只返回一部分的內容，只有當頁面檢測到用戶瀏覽到底部時，纔會發送新的請求更多的內容。這就是上拉頁面自動加載！至於說爲何是上拉呢，是由於網頁是向上移動的，看上去就像是被拉上去了同樣。

 

上拉頁面主要用在瀑布流佈局中

 

要實現下拉頁面自動加載的關鍵就是檢測到用戶已經瀏覽到頁面底部了！

 

首先要明白網頁文檔、瀏覽器窗口二者的區別和聯繫。

網頁文檔也就是html文檔，通常它比瀏覽器窗口要高的多，因此纔會出現滾動條，讓咱們滾動網頁瀏覽內容的。

設想一種狀況，當瀏覽器滾動條在中間時，咱們發現此時網頁文檔被瀏覽器窗口分紅了三部分。第一部分是目前正在看內容，即瀏覽器窗口高寬容納的內容；第二部分是已經看過的內容，即被滾動條拉上去的內容；第三部分還未看到的內容，即滾動條下面的內容。

 

從上面的描述咱們能想象，當未看內容高度爲0時，即已看內容+正在看的內容=所有的網頁內容，就表示用戶瀏覽完了當前網頁的所有內容了，這時就須要咱們體諒用戶的需求，自動加載更多的內容了。

 

正在看的內容高度 = $(window).height()

已看內容的高度 = $(window).scrollTop()

所有網頁內容的高度 = $(document).height()

 

if(($(window).height()+$(window).scrollTop()) == $(document).height()){

　　//加載更多的數據

}