1.如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < windowHeight + scrollTop&&offsetTop > scrollTop){
return true
}
return false
}
2.當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍蜕着。每次出現(xiàn)都在控制臺打印 true 僵蛛。用代碼實(shí)現(xiàn)
$(window).scroll(function(){
if(isVisible($('#last-img'))){
console.log('true')
}
});
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < windowHeight + scrollTop&&offsetTop > scrollTop){
return true
}
}
3.當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍瑟幕。在元素第一次出現(xiàn)時在控制臺打印 true磕蒲,以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)
4.圖片懶加載的原理是什么只盹?
1.頁面中的圖片沒有src
屬性值或src
指向同一張占位符圖片
2.img標(biāo)簽新增一條存放圖片地址的屬性辣往,如data-src
3.當(dāng)圖片出現(xiàn)在窗口范圍時,將data-src
的值賦給src
殖卑,此時加載圖片