1：如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間砌滞，肉眼可視）晴楔。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var windowHeight = $(window).height()
scrollTop = $(window).scrollTop()
nodeTop = $node.offset().top
nodeHeight = $node.height()
if(nodeTop < windowHeight + scrollTop && scrollTop < nodeTop + nodeHeight){
return true
}else{
return false
}
2：當(dāng)窗口滾動時(shí)泻骤，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 奇瘦。用代碼實(shí)現(xiàn)
$(window).on('scroll',function(){
if(isVisible($('p'))){
console.log('true')
}else{
console.log('false')
}
})
function isVisible($node){
var windowHeight = $(window).height()
scrollTop = $(window).scrollTop()
nodeTop = $node.offset().top
nodeHeight = $node.height()
if(nodeTop < windowHeight + scrollTop& scrollTop < nodeTop + nodeHeight){
return true
}else{
return false
}
}
3：當(dāng)窗口滾動時(shí)桩卵，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍验靡。在元素第一次出現(xiàn)時(shí)在控制臺打印 true，以后再次出現(xiàn)不做任何處理雏节。用代碼實(shí)現(xiàn)
var clock = 0;
$(window).on('scroll',function(){
if(isVisible($('p'))){
clock++
if(clock == 1){
console.log('true')
}
}else{
console.log('false')
}
})
function isVisible($node){
var windowHeight = $(window).height()
scrollTop = $(window).scrollTop()
nodeTop = $node.offset().top
nodeHeight = $node.height()
if(nodeTop < windowHeight + scrollTop& scrollTop < nodeTop + nodeHeight){
return true
}else{
return false
}
}
4： 圖片懶加載的原理是什么胜嗓？
- 懶加載的原理是通過自定義屬性標(biāo)簽存放圖片原有的src屬性，當(dāng)img標(biāo)簽出現(xiàn)在瀏覽器窗口范圍內(nèi)再依次將原src屬性填充以達(dá)到懶加載的效果钩乍。這種方法減少了開始加載網(wǎng)頁時(shí)的請求辞州，減少瀏覽器卡死的幾率，減少了流量的消耗寥粹，同時(shí)提高了用戶體驗(yàn)变过。
5： 實(shí)現(xiàn)視頻中的圖片懶加載效果
代碼
預(yù)覽
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
