jquery懒加载、回到顶部

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

function isVisible($node){
  var winH = $(window).height(),
      scrollH = $(window).scrollTop(),
      nodeH = $node.offset().top;
  if(winH + scrollH > nodeH && scrollH > nodeH){
    return true;
  }else{
    return false
  }
}

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

function isVisible($node){
  var winH = $(window).height(),
      scrollH = $(window).scrollTop(),
      nodeH = $node.offset().top;
  if(winH + scrollH > nodeH && scrollH > nodeH){
    return true;
  }else{
    return false;
  }
}
$(window).on('scroll', function(){
  var cur = $('.btn');
  if(isVisible(cur)){
    console.log("true");
  }
});

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

function isVisible($node){
  var winH = $(window).height(),
      scrollH = $(window).scrollTop(),
      nodeH = $node.offset().top;
  if($node.data('data-check')){
    if(winH + scrollH > nodeH && scrollH > nodeH){
      $node.data('data-check', true);
      console.log("true");
    }else{
      return false;
    }
  }
}
$(window).on('scroll', function(){
    var cur = $('.btn');
    isVisible(cur);
  }
});

4.图片懒加载的原理是什么？

懒加载也叫延迟加载，先在img src中放一张占位符图片，而真实的图片地址存放在相对应一个属性 data-img(后缀img可以自定义)中，这样的话页面加载的时候只加载src地址，不会对属性的图片真正地址加载，滚动时候判断待加载的资源相对于浏览器顶端的距离，可视区域相对于浏览器顶端的距离如果为true的话 则把相对应的data-img值赋值给src否则不加载。