懒加载

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

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

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

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

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

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

$(window).on('scroll', function(){
  var $node = $('.node');
  var lock;
  if (isVisible($node) && !$node.attr('lock')){
    console.log(isVisible($node));
    $node.attr('lock', true);
  }
})

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

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

作用：监听事件发生，再进行下载图片，这样可以提高性能（放置一次性加载多张图片而产生卡顿），也能帮用户省流量

原理：先创建一个新的标签（data-src）放置真是图片地址，在img节点中的src标签放置同一张无意义（空白）图片，待事件发生（滚动事件）时，把data-src中的图片地址放置到src中，让浏览器加载。

题目5： 实现视频中的图片懒加载效果

地址