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

function isVisible($node){
    var scrollTop = $(window).scrollTop()
    var windowHeight = $(window).height()
    var offsetTop = $node.offset().top
    if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
        return true
     }
    return false
}

2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

var toggle = true //设置一个开关
$(window).on('scroll', function(){
  if( isVisible($node) ){ //先判断元素是否可视
    if(toggle){ //如果元素可视，并且toggle是true
      console.log('true') //输出true
      toggle = false //接着关闭toggle
    }
  }else{  //如果元素不可见，则保持（或打开）toggle，以便下次元素可视时，保证toggle呈开启状态
    toggle = true    
  }
})

效果预览

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

var toggle = true
$(window).on('scroll', function(){
  if(toggle){  //这次先判断 toggle，如果是false，则后面每次元素可视时，不必在浪费时间
    if( isVisible($('.box1')) ){ //如果元素可视
      console.log('true') //输出true
      toggle = false //接着永久关闭toggle
    }
  }
})

效果预览

4： 图片懒加载的原理是什么？

1. 首先在图片中预先埋入自定义data-src存储真路径， 而src属性则写入相同loading图片路径，或者blank图片路径。

2. 接着渲染当前可视范围内的图片

3. 然后为窗口绑定scroll滚动事件，遍历图片，传入函数，看情况渲染：
   如果图片出现在窗口可视范围时，并且图片尙未加载，则把src替换为data-src，如果图片src === data-src，则说明已经加载过了，那么本次滚动事件中，可视图片不再做处理，不可视图片，虽然未加载，但尚未处于可视范围，因此也不做处理。

上述中关于判断图片是否可视的思路是：
当前已滚动高度 < 图片距离文档顶部高度 < 当前已滚动高度 + 当前窗口高度

5： 一种图片懒加载效果：

点击图片预览