懒加载相关

题目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 。用代码实现

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

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

 $(window).on('scroll',function(){
   $('li').each(function(){
     if(checkShow($(this)) && !hasClass($(this))){
       console.log('true')
       addClass($(this))
       }
     })
  })
             
function checkShow($node){
  var a = $(window).scrollTop()
  var b = $(window).height()
  var c = $node.offset().top
  
  if(c >= a && c <= a+b){
    return true
  }
  return false
}

function addClass($node){
  $node.addClass('show')
}

function hasClass($node){
  if($node.hasClass('show')){return true}
  return false
}

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

对目标元素进行scroll事件绑定，写一个函数对其是否出现在可视区域进行判定，如果出现，再写一个函数对其是否加载进行判断，如果没有，给其src属性添加链接使其可以加载。

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

  
  
  
  


  

    < img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
    < img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
    < img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
    < img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
    < img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">