回答：

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

      function isVisible($node){
        var    $windosHeight = $(window).height(),//窗口高度
              $windosScrollTop = $(window).scrollTop(),//窗口滚动高度
              $nodeHeight = $($node).height(), //节点cotentarea 高度
              $nodeOffsetTop = $($node).offset().top; //节点距根节点高度
        if(    $windosHeight+$windosScrollTop > $nodeOffsetTop && $windosScrollTop < $nodeOffsetTop+$nodeHeight) {
            //在可视区域内
            return true
        }
        return false;
    }

元素距离根元素的高度 < 窗口高度 + 窗口滚动高度；
窗口滚动高度 < 元素距离根元素的高度 + 元素本身高度；
2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

     $(window).on('scroll', function() {
      if(isVisible($node)) {
        console.log('true');
      }
    })

3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

<script>
    var $visible = $('.visible');
    var flag = true;
    $(window).on('scroll', function() {
      if(flag) {
        isVisible($visible);
      }
    })

    function isVisible($node) {
      var windowHeight = $(window).height(),
            scrollTop = $(window).scrollTop(),
            offsetTop = $node.offset().top,
            nodeHeight = $node.outerHeight(true);
      if (windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight) {
        console.log('true');
        flag = false;
        return true;
      }else{
        return false;
      }
    }
  </script>

4.图片懒加载的原理是什么？
当用户往下滚动窗口，图片进入window窗口（用户可见）就会加载。正常的时候图片地址是放在自定义属性上，用户滚动窗口后才将地址赋值给src，这样优化了代码的性能。

代码

回到顶部
懒加载
无限滚动