1、如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間搞监，肉眼可視）水孩。
先理解兩個(gè)概念
- 元素頂部“露出”頁面的時(shí)機(jī)是：元素距頂部高度 = 窗口滾動(dòng)高度+窗口高度
- 元素尾部“消失”頁面的時(shí)機(jī)是：元素距頂部高度+元素高度 = 窗口滾動(dòng)高度
然后掌握獲取這些高度的方法
- 獲取元素高度：
（1）element.style.height：高度寫在內(nèi)聯(lián)樣式上（不推薦），單位：px
<div id="div1" style="height:150px"></div>
console.log(div1.style.height)
//"150px"
（2）getComputedStyle(element).height：計(jì)算后的樣式（推薦）琐驴，單位：px
#div1 {
width: 100px;
height: 150px;
background: green;
margin-top: 1000px;
}
<div id="div1"></div>
console.log(getComputedStyle(div1).height)
//"150px"
（3）$(selector).css(propertyName)：?jiǎn)挝籶x或$(selector).propertyName()：?jiǎn)挝环郑瑪?shù)值
注意后者只局限于讀寫寬高等
#div1 {
width: 100px;
height: 150px;
background: green;
margin-top: 1000px;
}
<div id="div1"></div>
console.log($('#div1').height())
//150px
console.log($('#div1').css('height'))
//"150px"
- 獲取元素距頂部高度：分別有原生JS和JQuery方法，注意單位
這里要引入一個(gè)概念绝淡，offsetParent：
offsetParent并不是元素的父元素宙刘，而是已經(jīng)定位的父元素（設(shè)置position）。
大多數(shù)情況下牢酵，元素都沒有offsetParent悬包，所以offsetTop等值都是相對(duì)與窗口的。
一旦元素有了offsetParent馍乙，便是相對(duì)于offsetParent布近，并且可以有多個(gè)。測(cè)試中丝格，元素會(huì)忽略offsetParent的邊框?qū)挾瘸徘疲斐烧`差。
（1）大多數(shù)情況元素沒有offsetParent显蝌，我們直接獲取元素距頂部高度：
#div1 {
width: 100px;
height: 150px;
background: green;
margin-top: 1000px;
}
<div id="div1"></div>
console.log($('#div1').offset().top)
//1000
console.log(div1.offsetTop)
//1000
（2）如果考慮offsetParent预伺，我們可以這樣：
#div1 {
border: 1px solid;
width: 100px;
height: 150px;
background: green;
}
#ct {
top:100px;
position: absolute;
border: 100px solid;
padding: 100px;
}
<div id="ct">
<div id="div1"></div>
</div>
function getOffsetTop( elem ){
var offsetTop = -parseInt(getComputedStyle(elem).borderTopWidth)
do {
offsetTop += elem.offsetTop
+parseInt(getComputedStyle(elem).borderTopWidth)
} while( elem = elem.offsetParent )
console.log(offsetTop)
}
getOffsetTop(div1)
//輸出300，邊框也計(jì)算在內(nèi)了
- 獲取窗口滾動(dòng)高度：原生JS曼尊、JQuery都可以
console.log(document.body.scrollTop)
//359
console.log($('body').scrollTop())
//359
console.log($(window).scrollTop())
//359
- 獲取窗口的高度比較簡(jiǎn)單：
console.log(window.innerHeight)
//601
console.log($(window).innerHeight())
//601
知道了上邊這些扭屁，判斷元素是否出現(xiàn)在窗口可視范圍就簡(jiǎn)單了。
function isVisible($node){
if($node.offset().top<window.innerHeight+$('body').scrollTop()
&&$node.offset().top+$node.height()>$('body').scrollTop()){
console.log($node+'在可視區(qū)域')
}else{
console.log($node+'不在可視區(qū)域')
}
}
2涩禀、當(dāng)窗口滾動(dòng)時(shí)料滥，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 艾船。用代碼實(shí)現(xiàn)
function isVisible($node){
if($node.offset().top<window.innerHeight+$('body').scrollTop()
&&$node.offset().top+$node.height()>$('body').scrollTop()){
console.log(true)
}
}
$(window).scroll(function(){
isVisible($('#div1'))
})
預(yù)覽地址：http://js.jirengu.com/finef/8/edit
3雷滚、當(dāng)窗口滾動(dòng)時(shí)衫嵌，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理摊趾。用代碼實(shí)現(xiàn)
思路：當(dāng)?shù)谝淮螡M足可視條件時(shí)給元素做一個(gè)標(biāo)記，并輸出true剧辐；以后每次滾動(dòng)作出判斷匀伏，消失時(shí)取消這個(gè)標(biāo)記，已經(jīng)有標(biāo)記就什么也不做。
var state = false
function isVisible($node){
if($node.offset().top<window.innerHeight+$('body').scrollTop()
&&$node.offset().top+$node.height()>$('body').scrollTop()){
if(state === false){
console.log(true)
state = true
}
}else{
state = false
}
}
$(window).scroll(function(){
isVisible($('#div1'))
})
預(yù)覽地址：http://js.jirengu.com/vijub/3/edit
4烤惊、 圖片懶加載的原理是什么乔煞？
- 原理：先將img標(biāo)簽中的src鏈接設(shè)為同一張圖片（空白圖片），將其真正的圖片地址存儲(chǔ)再img標(biāo)簽的自定義屬性中（比如data-src）柒室。當(dāng)js監(jiān)聽到該圖片元素進(jìn)入可視窗口時(shí)渡贾，即將自定義屬性中的地址存儲(chǔ)到src屬性中，達(dá)到懶加載的效果雄右。
- 這樣做能防止頁面一次性向服務(wù)器響應(yīng)大量請(qǐng)求導(dǎo)致服務(wù)器響應(yīng)慢空骚，頁面卡頓或崩潰等問題。
5擂仍、實(shí)現(xiàn)圖片懶加載效果
預(yù)覽地址：http://js.jirengu.com/raqof/7
