今天做到項(xiàng)目中的圖片展示，由于每一頁(yè)的圖片數(shù)量都很多，因此需要為圖片的展示設(shè)計(jì)一種懶加載的功能。

　　第一要做的當(dāng)然就是給程序添加滾動(dòng)監(jiān)聽(tīng)事件。

1 //觸發(fā)拉取圖片開(kāi)關(guān)，保證正在拉取時(shí)不能再次觸發(fā) 2 var scrollFlag = true; 3 4 //給滾動(dòng)頁(yè)面添加監(jiān)聽(tīng)事件 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 //懶加載圖片請(qǐng)求 17 function pullPic() { 18 scrollFlag = false; 19 console.log("加載圖片3秒鐘"); 20 setTimeout(function() { 21 scrollFlag = true; 22 }, 3000); 23 }

我們來(lái)看看JS中常用的關(guān)于位置查詢的函數(shù)：

onscroll

　　當(dāng)元素的滾動(dòng)條滾動(dòng)時(shí)觸發(fā)的事件。

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

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

　　需要注意的是，滾動(dòng)條一定要出現(xiàn)，而且滾動(dòng)條是屬于這元素的

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

　　因?yàn)橥鈱觲rap的高度小于內(nèi)層inner的高度，所以當(dāng)設(shè)置overflow:auto時(shí)會(huì)出現(xiàn)滾動(dòng)條，當(dāng)拖動(dòng)滾動(dòng)條時(shí)就會(huì)觸發(fā)wrap的onscroll事件，而不是inner的onscroll事件，即這滾動(dòng)條屬于wrap而不是屬于inner。

scrollTop

　　元素滾動(dòng)條內(nèi)的頂部隱藏部分的高度。

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

　　用法1：獲取值 var top = element.scrollTop;//返回?cái)?shù)字，單位像素

　　用法2：設(shè)置值 element.scrollTop = 200;

　　對(duì)上面的例子來(lái)說(shuō)，控制滾動(dòng)條的位置是wrap.scrollTop=xx;而不是inner.scrollTop，道理同上。

scrollHeight

　　元素滾動(dòng)條內(nèi)的內(nèi)容高度。

　　scrollHeight同scrollTop屬性一樣，只有DOM元素才有，window/document沒(méi)有。

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

關(guān)于window.scroll()，window.scrollBy()，window.scrollTo()

　　window.scroll(x,y)是讓window滾動(dòng)條滾動(dòng)到那個(gè)x,y坐標(biāo)。//x是水平坐標(biāo)，y是垂直坐標(biāo)。

　　window.scrollBy(-x,-y)是讓window滾動(dòng)條相對(duì)滾動(dòng)到某個(gè)坐標(biāo)，- 10即相對(duì)向左/向上滾動(dòng)10像素。

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

轉(zhuǎn)載于:https://www.cnblogs.com/guanghe/p/10595460.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。