題目1：如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
題目2：當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 。用代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>item2</title>
<style>
p {
width: 600px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<p>第1個(gè)元素</p>
<p>第2個(gè)元素</p>
<p>第3個(gè)元素</p>
<p>第4個(gè)元素</p>
<p>第5個(gè)元素</p>
<p>第6個(gè)元素</p>
<p>第7個(gè)元素</p>
<p class="test">第8個(gè)元素</p>
<p>第9個(gè)元素</p>
<p>第10個(gè)元素</p>
<script>
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $('.test').offset().top
if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
console.log('true')
}
})
</script>
</body>
</html>
題目3：當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>item3</title>
<style>
p {
width: 600px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<p>第1個(gè)元素</p>
<p>第2個(gè)元素</p>
<p>第3個(gè)元素</p>
<p>第4個(gè)元素</p>
<p>第5個(gè)元素</p>
<p>第6個(gè)元素</p>
<p>第7個(gè)元素</p>
<p class="test">第8個(gè)元素</p>
<p>第9個(gè)元素</p>
<p>第10個(gè)元素</p>
<script>
var isShow = false // 添加判定條件
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $('.test').offset().top
if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop && isShow === false) {
console.log('true')
isShow = true
}
})
</script>
</body>
題目4： 圖片懶加載的原理是什么？
- 對(duì)于所有的img標(biāo)簽，把真實(shí)的地址放入自定義屬性內(nèi)，例如放到data-src內(nèi)，
- 當(dāng)頁(yè)面滾動(dòng)時(shí)，檢查頁(yè)面所有的img，判斷該img標(biāo)簽是否出現(xiàn)在屏幕顯示范圍內(nèi)；
- 當(dāng)該img標(biāo)簽出現(xiàn)在屏幕顯示范圍內(nèi)，判斷該img標(biāo)簽是否已經(jīng)加載過(guò)；
- 如果該img標(biāo)簽沒(méi)有加載過(guò)，通過(guò)JS給img的SCR屬性賦值，加載該img標(biāo)簽
題目5： 實(shí)現(xiàn)視頻中的圖片懶加載效果
題目5
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
