題目1：如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數(shù) isVisible實現(xiàn)
function isVisible($node) {
var offsetTop = $node.offset().top
var winH = $(window).height()
if(offsetTop >scrollY && offsetTop < (winH+scrollY)){
console.log('可見')
}else{
console.log('不可見')
}
}
題目2：當(dāng)窗口滾動時山叮，判斷一個元素是不是出現(xiàn)在窗口可視范圍楔敌。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)
$(window).on('scroll', isVisible)
function isVisible($node) {
var $node = $('.node')
var offsetTop = $node.offset().top
var winH = $(window).height()
if((offsetTop+$node.height()) >scrollY && offsetTop < (winH+scrollY)){
console.log(true)
}else{
console.log(false)
}
}
題目3：當(dāng)窗口滾動時饲嗽，判斷一個元素是不是出現(xiàn)在窗口可視范圍炭玫。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理貌虾。用代碼實現(xiàn)
var show = false
$(window).on('scroll', function () {
if (!show) {
isVisible()
} else {
return
}
})
function isVisible($node) {
var $node = $('.node'),
offsetTop = $node.offset().top,
winH = $(window).height()
if ((offsetTop + $node.height()) > scrollY && offsetTop < (winH + scrollY)) {
console.log(true)
show = true
return true
} else {
return false
}
}
題目4： 圖片懶加載的原理是什么吞加？
- 將圖片真正的地址放到自定義屬性中,等待調(diào)用. 而src中可以放同一張代表加載中的圖片,這樣只需加載一次圖片, 也不會出現(xiàn)
x
- 判斷圖片是否可見, 如果可見就把自定義屬性中的地址放回src中, 開始加載圖片
題目5： 實現(xiàn)視頻中的圖片懶加載效果
demo
題目6： 實現(xiàn)視頻中的新聞懶加載效果
代碼
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
