懒加载

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

实现

function isVisible($node){ 
  var scrollTop = $(window).scrollTop()//获取window相对滚动条顶部的偏移
  var windowHeight = $(window).height()//获取window窗口的高度
  var offSetHeight = $node.offset().top//获取匹配元素在当前视口的相对偏移
  var height = $node.height()//元素高度
  if(offSetHeight < scrollTop + windowHeight && (offSetHeight + height) < scrollTop){
    return true
  }
  return false
}

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

$(window).scroll(function(){
  var scrollTop = $(window).scrollTop()
  var windowHeight = $(window).height()
  var offSetHeight = $node.offset().top
  var height = $node.height()
  if(offSetHeight < scrollTop + windowHeight && (offSetHeight + height) < scrollTop){
      console.log(true)
    }
})

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

$(window).scroll(function(){
  var scrollTop = $(window).scrollTop()
  var windowHeight = $(window).height()
  var offSetHeight = $node.offset().top
  var height = $node.height()
  if(offSetHeight < scrollTop + windowHeight && (offSetHeight + height) < scrollTop){
        if($node.attr('isload')==='1'){
return;
}else{
         console.log(true);
         $node.attr('isLoad','1');
        }
})

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

图片懒加载的原理是将页面里所有img属性src属性用data-xx代替并，而且页面滚动直至此图片出现在可视区域时，用js改变元素的属性src属性，使图片在可视时被加载。
一般实现方法：获取窗口的高度，页面滚动的高度和图片偏离根元素的top相对值。判断图片偏离根元素的top相对值是否大于窗口高度加上页面滚动的高度，如果否则进入可视范围，同时修改图片src的值为图片地址。

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

demo

题目6(选做)： 实现如下 新闻自动懒加载效果54 （这里是参考代码258， 其中html里的为前端代码， js 里的内容为 router.js里的后端代码， 也可参考往前班级视频250)

demo