如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間硫痰，肉眼可視）猛遍。
-
原理：獲取這個(gè)元素的絕對(duì)位置遮咖，判斷它的縱坐標(biāo)是否在可視窗口之間腻窒；可視窗口：垂直滾動(dòng)距離 ~ 垂直滾動(dòng)距離+窗口高度
代碼實(shí)現(xiàn)（jQuery）： function isVisible($node) { var scrollTop = $(window).scrollTop() var windowVisible = scrolltop + $(window).height() var offsetTop = $node.offset().top if (offsetTop < windowVisible && offsetTop > scrolltop) { return true } return false }
當(dāng)窗口滾動(dòng)時(shí)昵宇，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 儿子。
代碼實(shí)現(xiàn)（調(diào)用上面的isVisble方法）：
$(node).('scroll', function () {
if (isVisible($(this))) {
console.log(true)
}
})
當(dāng)窗口滾動(dòng)時(shí)瓦哎，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true柔逼，以后再次出現(xiàn)不做任何處理蒋譬。
代碼實(shí)現(xiàn)：
function isVisible($node) {
var scrollTop = $(window).scrollTop()
var windowVisible = scrolltop + $(window).height()
var offsetTop = $node.offset().top
if (offsetTop < windowVisible && offsetTop > scrolltop && !$node.data.visible) {
$node.data('visible', 1)
return true
}
return false
}
$(node).('scroll', function () {
if (isVisible($(this))) {
console.log(true)
}
})
圖片懶加載的原理是什么？
- 一：先將img標(biāo)簽src屬性設(shè)置為空愉适，在圖片出現(xiàn)在可視窗口時(shí)再給它添加src屬性犯助。
- 二：先加載一部分圖片，在瀏覽器滾動(dòng)到接近底部時(shí)再動(dòng)態(tài)生成img標(biāo)簽维咸。
