題目1：如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數(shù) isVisible實現(xiàn)

function isVisible($node){
  var scrollTop = $(window).scrollTop();//窗口滾動條的垂直滾動距離
  var windowHeight = $(window).height;//可視窗口的高度
  var offsetTop = $node.offset().top;//元素到根節(jié)點的垂直距離
  if(scrollTop > offsetTop - windouHeight && scrollTop < offsetTop){
    return true;
  }
  return false;
}

題目2：當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)

function isVisible($node){
  var scrollTop = $(window).scrollTop();//窗口滾動條的垂直滾動距離
  var windowHeight = $(window).height;//可視窗口的高度
  var offsetTop = $node.offset().top;//元素到根節(jié)點的垂直距離
  if(scrollTop > offsetTop - windouHeight && scrollTop < offsetTop){
    return true;
  }
  return false;
}

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

題目3：當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)

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

function isVisible($node){
  var scrollTop = $(window).scrollTop();//窗口滾動條的垂直滾動距離
  var windowHeight = $(window).height;//可視窗口的高度
  var offsetTop = $node.offset().top;//元素到根節(jié)點的垂直距離
  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： 圖片懶加載的原理是什么？
為了整體網(wǎng)站的性能考慮，是一種延時加載圖片的方法。把圖片真實的URL 放在data-img的值中,當圖片進入可視區(qū)域時把data-img賦給src。
題目5： 實現(xiàn)視頻中的圖片懶加載效果
效果