jquery懒加载、回到顶部

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

function isVisible($el) {
  var winH = $(window).height(), //窗口高度
    offsetH = $el.offset().top, //此元素垂直方向偏移
    scrollH = $(window).scrollTop() //垂直滚动距离
  if((offsetH > scrollH) && (offsetH < scrollH + winH)){//根据这三个参数的值进行判定
    return true
  }else{
    return false;
  }
}

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

var $e = $("p");
$(window).on("scroll",function(){
  isVisible($e)
});
function isVisible($e){
  var winHeight = $(window).height(),
    WinTop = $(window).scrollTop(),
    offsetTop = $e.offset().top
  if(offsetTop < winHeight+WinTop){
    console.log("位于可视区域内")//出现了就打印
    return true
  }else{
    return false
 }
}

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

var $p=$('.test-p');
  $(window).on('scroll',function(){
    if( $p.data('isVisi') ){
      return;
    }else{
      isVisible($p);
    }    
  });

  function isVisible($node){
    var winH=$(window).height(),
      scrollTop=$(window).scrollTop(),
        offsetTop=$node.offset().top;
      if( offsetTop<winH+scrollTop && offsetTop>scrollTop){
        console.log(true);
        $p.data('isVisi',true);
      }else{
        return;
      }
  };

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

把图片真实的URL 放在data-img的值中,当图片进入可视区域的瞬间把data-img赋给src

---

---

代码1
代码2
代码3_本地测试已通过