进阶任务16

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

function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top

if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
    console.log('true')
    return true
}
return false
}

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

function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top

if(!$node.data('hasLoaded') && offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
    //为加载过的图片设置hasLoaded的属性为true
    $node.data('hasLoaded',true)
    console.log('true')
    return true
}
return false
}

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

原理：
1.对于所有的img标签，把真实图片地址放入自定义属性data-src中；
注意：最好在所有src属性中写入一个空白图片或loading图片，因为src若为空，有的浏览器会出现加载图片’X‘；
2.当滚动页面的时候，检查页面所有img标签，看看这个标签是否出现在用户视野中；
当出现在用户视野时，再去判断它是否已经加载过；
如果没有加载过，则加载它们。
代码思路：

//整体思路
$(window).on('scroll',function(){  //当滚动页面的时候
  $('.container img').each(function(){ //遍历图片
    if(checkShow($(this)) && !isloaded($(this))){  //判断图片是否出现在用户视野中且没有被加载过
        loadedImg($(this))                              //去加载图片
    }
})
})
//细化每个细节
//写一个函数：怎样判断图片出现在视野中
function checkShow($node){
  var scrollTop = $(window).scrollTop()
  var windowHeight = $(window).height()
  var offsetTop = $node.offset().top

  if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
    return true
}
  return false
}
//写一个函数： 判断图片是否被加载过
function isLoaded($node){
  return $node.attr('data-src') === $node.attr('src')
}
//写一个函数： 实现图片的加载
function loadedImg($node){
  $node.attr('src',$node.attr('data-src'))
}

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

图片懒加载效果