懒加载

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

 function isVisible($node){
      var nodeTop = $node.offset().top
      var windowHeight = $(window).height()
      var nodeScroll = $(window).scrollTop()
      if (nodeTop < windowHeight + nodeScroll && nodeTop > nodeScroll){
          console.log('元素出现在窗口可视范围中')
      }
 }

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

$('window').on('scroll', function(){
      var nodeTop = $node.offset().top
      var windowHeight = $(window).height()
      var nodeScroll = $(window).scrollTop()
      if (nodeTop < windowHeight + nodeScroll && nodeTop > nodeScroll){
          console.log(true)
      }
})

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

代码

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

先设置图片的data-set属性（作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图片举例页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。
代码核心

    function lazyRender(){
        $('img').each(function(){    //遍历每一张图片
            if (checkShow($(this)) && !isLoaded($(this))) {  //检测图片是否位于当前窗口中、图片是否已加载
                loadImg($(this)) //利用`attr`替换图片属性
            }
        })
    }

4.实现视频中的图片懒加载效果

代码