web前端-js小记(16)-懒加载

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

<div class="elem">hello</div>
<script>
  function isVisible($node){
    var elemTop=$node.offset().top;
    var windowHeight=$(window).height();
    var scrollTop=$(window).scrollTop();
    if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
      return true;
    }
  return false;
  }
  var result=isVisible($(".elem"));
</script>

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

//方法一：设置2个变量past、now，每次滚动比较2个变量，如果past显示没出现，now出现了，说明是出现了，在控制台输出。
//每次必须把now的值赋值给past,用来记录上一次的值
<div style="margin-top: 2000px;"></div>
<div class="elem">hello</div>
<div style="margin-top: 2000px;"></div>
<script>
  var clock,now;
  var past=isVisible($(".elem"));     //past表示刚载入页面isVisible返回的值
  $(window).on("scroll",function(){
    if(clock) clearTimeout(clock);
    clock=setTimeout(function(){
      now=isVisible($(".elem"));    //每次滚动鼠标记录isVisible返回的值
     if(past===false&&now===true){   //当上一次的记录的值为false并且这次滚动记录的值为true是输出true
       console.log("true");
     }
     past=now;   //每次记录isVisible的值传递给past
    },300);
  });
  function isVisible($node){
    var elemTop=$node.offset().top;
    var windowHeight=$(window).height();
    var scrollTop=$(window).scrollTop();
    if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
       return true;
    }
  return false;
  }
</script>
//方法二：方法和第一种类似，只是把past的值绑定到元素中,记录元素的状态，然后进行比较
<div style="margin-top: 2000px;"></div>
<div class="elem">hello</div>
<div style="margin-top: 2000px;"></div>
<script>
  var clock;
  $(window).on("scroll",function(){
    if(clock) clearTimeout(clock);
    clock=setTimeout(function(){
      if(isVisible($(".elem"))===true&&$(".elem").attr("visible")==="false"){
        console.log("true");$(".elem").attr("visible","true");
      }
      noVisible($(".elem"));
    },300);
  });
  function noVisible($node){
    if(isVisible($node)===false) $node.attr("visible","false");
  }
  function isVisible($node){
    var elemTop=$node.offset().top;
    var windowHeight=$(window).height();
    var scrollTop=$(window).scrollTop();
    if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
       return true;
    }
  return false;
  }
</script>

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

//方法一：
<div style="margin-top: 2000px;"></div>
  <div class="elem">hello</div>
  <div style="margin-top: 2000px;"></div>
<script>
  var clock,now;
  var past=isVisible($(".elem"));
  $(window).on("scroll",function(){
    if(now!==true){                             //用now记录isVisible的值，看是否为true
      if(clock) clearTimeout(clock);
      clock=setTimeout(function(){
        now=isVisible($(".elem"));
       if(past===false&&now===true){
         console.log("true");
       }
      },300);
      }
  });
  function isVisible($node){
    var elemTop=$node.offset().top;
    var windowHeight=$(window).height();
    var scrollTop=$(window).scrollTop();
    if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
       return true;
    }
  return false;
  }
</script>
//方法二：
<div style="margin-top: 2000px;"></div>
<div class="elem">hello</div>
<div style="margin-top: 2000px;"></div>
<script>
  var clock;
  noVisible($(".elem"));
  $(window).on("scroll",function(){
    if($(".elem").attr("visible")==="false"){
      if(clock) clearTimeout(clock);
      clock=setTimeout(function(){
        if(isVisible($(".elem"))===true){
          console.log("true");$(".elem").attr("visible","true");
        }
      },300);
    }
  });
  function noVisible($node){
    if(isVisible($node)===false) $node.attr("visible","false");
  }
  function isVisible($node){
    var elemTop=$node.offset().top;
    var windowHeight=$(window).height();
    var scrollTop=$(window).scrollTop();
    if(elemTop>scrollTop&&elemTop<(windowHeight+scrollTop)){
       return true;
    }
  return false;
  }
</script>

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

图片懒加载的目的是为了解决网站性能问题，减少请求资源的浪费。
1、 对于所有的 img 标签，把真实的地址放入自定义属性data-img
2、 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它

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

代码

题目6(选做)：实现如下 新闻自动懒加载效果

代码

(mission 16)