題目1：如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間肮疗，肉眼可視）晶姊。寫一個函數(shù) isVisible實現(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：當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍伪货。每次出現(xiàn)都在控制臺打印 true 们衙。用代碼實現(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個元素</p>
<p>第2個元素</p>
<p>第3個元素</p>
<p>第4個元素</p>
<p>第5個元素</p>
<p>第6個元素</p>
<p>第7個元素</p>
<p class="test">第8個元素</p>
<p>第9個元素</p>
<p>第10個元素</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：當窗口滾動時钾怔，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true蒙挑，以后再次出現(xiàn)不做任何處理宗侦。用代碼實現(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個元素</p>
<p>第2個元素</p>
<p>第3個元素</p>
<p>第4個元素</p>
<p>第5個元素</p>
<p>第6個元素</p>
<p>第7個元素</p>
<p class="test">第8個元素</p>
<p>第9個元素</p>
<p>第10個元素</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： 圖片懶加載的原理是什么？
- 對于所有的img標簽忆蚀，把真實的地址放入自定義屬性內(nèi)矾利，例如放到data-src內(nèi)，
- 當頁面滾動時馋袜，檢查頁面所有的img男旗，判斷該img標簽是否出現(xiàn)在屏幕顯示范圍內(nèi)；
- 當該img標簽出現(xiàn)在屏幕顯示范圍內(nèi)欣鳖，判斷該img標簽是否已經(jīng)加載過察皇；
- 如果該img標簽沒有加載過，通過JS給img的SCR屬性賦值泽台，加載該img標簽
題目5： 實現(xiàn)視頻中的圖片懶加載效果
題目5
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
