懒加载

如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。

• 原理：获取这个元素的绝对位置，判断它的纵坐标是否在可视窗口之间；可视窗口：垂直滚动距离 ~ 垂直滚动距离+窗口高度

  代码实现（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标签。

图片懒加载效果

新闻懒加载