JS使用onscroll、scrollTop實現圖片懶加載

　　今天做到項目中的圖片展示，由於每一頁的圖片數量都很多，因此需要為圖片的展示設計一種懶加載的功能。

　　第一要做的當然就是給程序添加滾動監聽事件。

//觸發拉取圖片開關，保證正在拉取時不能再次觸發
var scrollFlag = true;

//給滾動頁面添加監聽事件
$(window).scroll(function() {
    var windowHeight = $(window).height();
    var scrollHeight = $(window).scrollTop();
    var cursor = $(".pic").offset().top;
    if(windowHeight + scrollHeight > cursor + 100) {
        if(scrollFlag) {
            pullPic();
        }
    }
});

//懶加載圖片請求
function pullPic() {
    scrollFlag = false;
    console.log("加載圖片3秒鍾");
    setTimeout(function() {
        scrollFlag = true;
    }, 3000);
}

我們來看看JS中常用的關於位置查詢的函數：

onscroll

　　當元素的滾動條滾動時觸發的事件。

　　onscroll事件任何實體元素都可以綁定，這里的實體元素包括window元素、document元素、DOM元素。

　　用法即：element.onscroll = function(){};

　　需要注意的是，滾動條一定要出現，而且滾動條是屬於這元素的

<div id="wrap" style="height:100px;overflow:auto;">
    <div id="inner" style="height:200px;">content</div>
</div>

　　因為外層wrap的高度小於內層inner的高度，所以當設置overflow:auto時會出現滾動條，當拖動滾動條時就會觸發wrap的onscroll事件，而不是inner的onscroll事件，即這滾動條屬於wrap而不是屬於inner。

scrollTop

　　元素滾動條內的頂部隱藏部分的高度。

　　scrollTop屬性只有DOM元素才有，window/document沒有，但用jquery$(window).scrollTop()也可以查出值。

　　用法1：獲取值 var top = element.scrollTop;//返回數字，單位像素

　　用法2：設置值 element.scrollTop = 200;

　　對上面的例子來說，控制滾動條的位置是wrap.scrollTop=xx;而不是inner.scrollTop，道理同上。

scrollHeight

　　元素滾動條內的內容高度。

　　scrollHeight同scrollTop屬性一樣，只有DOM元素才有，window/document沒有。

　　不同的是scrollHeight是只讀，不可設置。此外還有scrollLeft，scrollWidth，道理是一樣的。

關於window.scroll()，window.scrollBy()，window.scrollTo()

　　window.scroll(x,y)是讓window滾動條滾動到那個x,y坐標。//x是水平坐標，y是垂直坐標。

　　window.scrollBy(-x,-y)是讓window滾動條相對滾動到某個坐標，- 10即相對向左/向上滾動10像素。

　　window.scrollTo(x,y)和window.scroll(x,y)一樣。