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

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

1 //觸發拉取圖片開關，保證正在拉取時不能再次觸發 2 var scrollFlag = true; 3 4 //給滾動頁面添加監聽事件 5 $(window).scroll(function() { 6 var windowHeight = $(window).height(); 7 var scrollHeight = $(window).scrollTop(); 8 var cursor = $(".pic").offset().top; 9 if(windowHeight + scrollHeight > cursor + 100) { 10 if(scrollFlag) { 11 pullPic(); 12 } 13 } 14 }); 15 16 //懶加載圖片請求 17 function pullPic() { 18 scrollFlag = false; 19 console.log("加載圖片3秒鐘"); 20 setTimeout(function() { 21 scrollFlag = true; 22 }, 3000); 23 }

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

onscroll

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

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

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

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

1 <div id="wrap" style="height:100px;overflow:auto;"> 2 <div id="inner" style="height:200px;">content</div> 3 </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)一樣。

轉載于:https://www.cnblogs.com/guanghe/p/10595460.html

總結

以上是生活随笔為你收集整理的JS使用onscroll、scrollTop实现图片懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。