如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。
-
原理：獲取這個元素的絕對位置，判斷它的縱坐標是否在可視窗口之間；可視窗口：垂直滾動距離 ~ 垂直滾動距離+窗口高度
代碼實現（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 }
當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。
代碼實現（調用上面的isVisble方法）：
$(node).('scroll', function () {
if (isVisible($(this))) {
console.log(true)
}
})
當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。
代碼實現：
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標簽src屬性設置為空，在圖片出現在可視窗口時再給它添加src屬性。
- 二：先加載一部分圖片，在瀏覽器滾動到接近底部時再動態生成img標簽。
