懒加载

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

window.jpg

元素处于窗口高度外
窗口高度 + 垂直滚动距离 = 元素垂直方向距离

元素开始出现
窗口高度 + 垂直滚动距离 > 元素垂直方向距离

元素开始消失
垂直滚动距离 > 元素垂直方向距离

元素消失完毕
垂直滚动距离 > 元素垂直方向距离 + 元素自身高度

滚轮向下滚动的距离 == 元素上升的距离

function isVisible($node){
  var scrollTop = $(window).scrollTop()
  //滚动的高度
  var windowHeight = $(window).height()
  //窗口高度
  var offsetTop = $node.offset().top
  //元素距离顶端的高度
  if( offsetTop < scrollTop + windowHeight && offserTop > scrollTop) 
  //元素距离顶端的高度 小于 窗口高度 并且 大于滚动高度（元素出现的时候）
    {
      return true
      //返回true
  }
  return false
}

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

  function isVisible($node){
    var scrollTop = $(window).scrollTop()
    //滚动的高度
    var windowHeight = $(window).height()
    //窗口高度
    var offsetTop = $node.offset().top
    //元素距离顶端的高度
    if( offsetTop < scrollTop + windowHeight && offserTop > scrollTop) 
    //元素距离顶端的高度 小于 窗口高度 并且 大于滚动高度（元素出现的时候）
    {
      return true
      //返回true
    }
    return false
  }
  //方法一
  $(window).on('scroll',function(){
    if(isVisible){
      console.log(true)
    }
  })
------------------------------------
  //方法二
  $(window).on('scroll',function(){
    xxx()
  })
  function xxx(){
    $(node).each(function(){
      if(isVisible($(this))){
        console.log(true)
      }
    })
  }

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

function isVisible($node){
  var scrollTop = $(window).scrollTop()
  //滚动的高度
  var windowHeight = $(window).height()
  //窗口高度
  var offsetTop = $node.offset().top
  //元素距离顶端的高度
  if( offsetTop < scrollTop + windowHeight && offserTop > scrollTop) 
  //元素距离顶端的高度 小于 窗口高度 并且 大于滚动高度（元素出现的时候）
    {
      return true
      //返回true
  }
  return false
}

var hadShow = false;
$(window).on('scroll',function(e){
  var $markImg = $('.markImg');
  //获取该元素
  if(!hadshow && isVisiblie($markImg) ){  
  //事件为true并且元素出现在了窗口中
    console.log(true); 
    //输出true
    hadShow = true;
    //改变值
  }
})

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

以上的思路
1.对于所有的img标签，把真实的地址放入自定义属性data-img
2.当滚动页面时，检查页面所有的img标签，看看这个标签是否出现到我们的视野，当出现在我们视野时，再去判断它是否已经加载过，如果没有加载过，加载它。
另外的思路
展示一部分HTML内容，在底部埋入一个DOM节点，用户看不到这个节点，但在滚动的过程中，假设用户滚动到了底部，这个节点出现在浏览器窗口，向后台发送ajax请求，得到数据，把这些数据拼装成DOM放到页面上。这个加载节点又被新加入的元素撑下去了，当用户再滚动的过程中，重复获取添加数据。

懒加载的好处：同时加载所有图片，影响用户体验，浪费多余流量消耗（如：手机），出现卡顿情况，所以使用懒加载。

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

预览地址

实现新闻自动懒加载效果98 （这里是参考代码282， 其中html里的为前端代码， js 里的内容为 router.js里的后端代码， 也可参考视频271)

参考代码