懒加载

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

function isVisible($node){
  var scrollTop = $(window).scrollTop();//窗口滚动条的垂直滚动距离
  var windowHeight = $(window).height;//可视窗口的高度
  var offsetTop = $node.offset().top;//元素到根节点的垂直距离
  if(scrollTop > offsetTop - windouHeight && scrollTop < offsetTop){
    return true;
  }
  return false;
}

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

function isVisible($node){
  var scrollTop = $(window).scrollTop();//窗口滚动条的垂直滚动距离
  var windowHeight = $(window).height;//可视窗口的高度
  var offsetTop = $node.offset().top;//元素到根节点的垂直距离
  if(scrollTop > offsetTop - windouHeight && scrollTop < offsetTop){
    return true;
  }
  return false;
}

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

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

var $node = $('.node');

function isVisible($node){
  var scrollTop = $(window).scrollTop();//窗口滚动条的垂直滚动距离
  var windowHeight = $(window).height;//可视窗口的高度
  var offsetTop = $node.offset().top;//元素到根节点的垂直距离
  if(scrollTop > offsetTop - windouHeight && scrollTop < offsetTop){
    return true;
  }
  return false;
}

function isLoaded($node){
  return ($node.data('isLoaded') === 'yes');
}

$(window).on('scroll',function(){
 if( isVisible($node) && !isLoaded($node) ){
   $node.data('isLoaded', 'yes');
   console.log('true');
 }
})

题目4： 图片懒加载的原理是什么？
为了整体网站的性能考虑，是一种延时加载图片的方法。把图片真实的URL 放在data-img的值中,当图片进入可视区域时把data-img赋给src。
题目5： 实现视频中的图片懒加载效果
效果