如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
為加深印象直接寫出我測(cè)試的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
}
li {
background: aqua;
height: 100px;
}
.middle {
background: pink;
}
</style>
</head>
<body>
<ul class="ct">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li class="middle">hello world</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
<script>
function isVisible($node) {
var scrollTop = $(window).scrollTop();//滾動(dòng)條卷曲高度
var windowHeight = $(window).height();//可視內(nèi)容區(qū)高度
var offsetTop = $node.offset().top;//node偏移高度
if (offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop) {
console.log('true')
console.log(scrollTop)
console.log(windowHeight)
console.log(offsetTop)
} else {
console.log('false')
}
}
isVisible($('.middle'))
</script>
</body>
</html>
分析過(guò)程：
先上一張畫的很粗糙的圖——
大師兄所有，本圖禁止轉(zhuǎn)載！禁止轉(zhuǎn)載！禁止轉(zhuǎn)載！
- 判斷元素是否出現(xiàn)在瀏覽器的上邊緣和下邊緣之間，肉眼可視，首先要獲取滾動(dòng)條卷曲高度，可視內(nèi)容區(qū)高度及node元素的偏移高度，先明白如何讓node出現(xiàn)在我們?nèi)庋鬯爸畢^(qū)域。
- 由上圖可清晰看出，當(dāng)
offsetTop = scrollTop + windowHeight時(shí)，node剛好完全處于可視區(qū)下邊緣之下，所以offsetTop < scrollTop + windowHeight可確保node出現(xiàn)在可視區(qū)及滾動(dòng)條卷曲的區(qū)域之間，所以下一步是確保node不出現(xiàn)在滾動(dòng)條卷曲的區(qū)域，即offsetTop + $node.height() > scrollTop，需要注意的是這里的計(jì)算都是以node左上角點(diǎn)為原點(diǎn)。 - 為什么要加上node自身的高度？因?yàn)楫?dāng)node出現(xiàn)在視野中，繼續(xù)向下瀏覽頁(yè)面，node會(huì)從視野上方消失，在完全消失之前，node對(duì)于肉眼來(lái)說(shuō)仍是可見(jiàn)的，所以加上node的高度再去做計(jì)算，可以得到較為精確的結(jié)果。如果node高度值很大而你忽略了它，問(wèn)題就會(huì)比較明顯。
個(gè)人補(bǔ)充一題，如何判斷一個(gè)元素是否滾動(dòng)到了可視區(qū)域底部
與判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍同理，直接看代碼
$node = $('.middle');
var windowHeight = $(window).height();
var offsetTop = $node.offset().top;
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();//scrollTop是動(dòng)態(tài)的，所以需要在函數(shù)內(nèi)定義
//我寫的判斷條件過(guò)于嚴(yán)苛，實(shí)際運(yùn)用應(yīng)該只用實(shí)現(xiàn)大致到了底部就好
if ($node.height() + offsetTop - windowHeight == scrollTop) {//一般將動(dòng)態(tài)值放在運(yùn)算符右邊
console.log('true')
} else {
console.log('false')
}
})
我寫的判斷條件過(guò)于嚴(yán)苛，所以較難捕獲到true，實(shí)際運(yùn)用應(yīng)該只用實(shí)現(xiàn)大致到了底部就好
當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 。用代碼實(shí)現(xiàn)
function isVisible($node) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetTop = $node.offset().top;
if (offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop) {
return true
} else {
return false
}
}
//寫法一
$(window).on('scroll', function () {
if (isVisible($('.middle'))) {
console.log(true)
}
})
//寫法二
$(function () {
$(window).scroll(function () {
if (isVisible($('.middle'))) {
console.log(true)
}
})
})
當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)
function isVisible($node) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var offsetTop = $node.offset().top;
if (offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop) {
return true
} else {
return false
}
}
var isEleVisible = false
$(function () {
$(window).scroll(function () {
if (isVisible($('.middle')) && !isEleVisible) {
console.log(true)
isEleVisible = true
}
})
})
圖片懶加載的原理是什么？
- 首先明白為什么要懶加載：
懶加載即延遲，對(duì)于圖片過(guò)多的頁(yè)面，為了加快頁(yè)面加載速度，我們需要將頁(yè)面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動(dòng)到可視區(qū)域后再去加載。
這樣一來(lái)頁(yè)面加載性能大幅提升，提高了用戶體驗(yàn)。 - 實(shí)現(xiàn)原理：
- 在頁(yè)面載入時(shí)將img標(biāo)簽內(nèi)的src指向一個(gè)小圖片，即占位圖，將真實(shí)地址存放于一個(gè)自定義屬性data-src中，然后獲取頁(yè)面上的img標(biāo)簽并保存，開(kāi)啟一個(gè)定時(shí)器來(lái)遍歷保存的img標(biāo)簽，接下來(lái)判斷每個(gè)img是否出現(xiàn)在可視區(qū)，當(dāng)某個(gè)img出現(xiàn)在了可視區(qū)域，就將真實(shí)地址賦值給該img的src并將該img從數(shù)組中刪除以避免重復(fù)判斷。
- 我們需要判斷元素是否出現(xiàn)在了可視區(qū)，以上第一題我做了詳細(xì)解釋，這里不重復(fù)說(shuō)。
- 實(shí)現(xiàn)流程：
當(dāng)網(wǎng)頁(yè)滾動(dòng)事件被觸發(fā)??執(zhí)行加載圖片操作??判斷圖片是否在可視區(qū)且是否已經(jīng)加載過(guò)??在可視區(qū)且未被加載過(guò)則動(dòng)態(tài)地將data-src的值賦給該圖片的src屬性。
實(shí)現(xiàn)視頻中的圖片懶加載效果
（選做）實(shí)現(xiàn)如下 新聞自動(dòng)懶加載效果84 （這里是參考代碼， 其中html里的為前端代碼， js 里的內(nèi)容為 router.js里的后端代碼， 也可參考往前班級(jí)視頻264)
mark一下之后再補(bǔ)充這個(gè)選做題
參考資料：
