如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。

• 原理：獲取這個元素的絕對位置，判斷它的縱坐標(biāo)是否在可視窗口之間；可視窗口：垂直滾動距離 ~ 垂直滾動距離+窗口高度

  代碼實現(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)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。

代碼實現(xiàn)（調(diào)用上面的isVisble方法）：
$(node).('scroll', function () {
  if (isVisible($(this))) {
    console.log(true)
  }
})

當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理。

代碼實現(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)在可視窗口時再給它添加src屬性。
• 二：先加載一部分圖片，在瀏覽器滾動到接近底部時再動態(tài)生成img標(biāo)簽。

圖片懶加載效果

新聞懶加載