任务29 懒加载和回到顶部

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

• 首先，要知道三个高度之间的关系，
  窗口的高度可以通过$(window).height()获得，
  窗口滚动的高度可以通过$(window).scrollTop()获得，
  以及目标元素距离窗口顶部的高度距离，可以通过目标元素的$node.offset().top获得，
  当元素距离顶部的高度<窗口的高度+滚动的高度，它是可见的，反之，则不可见。
  function isVisible($node){
  var offset=$node.offset().top;
  var scrollTop=$(window).scrollTop();
  winH=$(window).height();
  if(offset>scrollTop+winH){
  alert('不在可视范围内')
  }else{
  alert('在可视范围内')
  }
  }

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

  $(window).on('scroll',function(){
      if(isVisible($node)){
            console.log('true')
          }
   })

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

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

• 设置延迟函数延迟执行，并设置标志位，判断是否滚动，若在几秒内一直在滚动，就不执行，清处定时器的，反之，则不执行清除定时器
  var clock;
  $(window).on('scroll',function(){
  if(clock){
  clearTimeout(clock)
  }
  var clock=setTimeout(function(){
  if(isVisible($node)&&!isLoaded($node)){
  console.log('true')
  }
  },500)
  })

    function isVisible($node){
        var offset    =    $node.offset().top;
        var   scrollTop=$(window).scrollTop();
                winH      =   $(window).height();
        if(offset<scrollTop+winH){
            return true
        }else{
            return false
        }
    }
  
    function isLoaded($node){
        if(!!$node.data('src')){
            return true；
        }else{
            $node.data('src',true);
            return false;
        }
    }
  

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

• 一般来说一个网页上会有几百个张图片，一张大图要100K以上,如果一次性同时加载网页，向服务器发送请求，数据超过10M,这直接会导致服务器忙不过来，因为http协议是只要客户端发送请求-服务器就会响应，页面加载卡死，所以为了避免这种情况和性能优化，才出现了懒加载。
• 懒加载的原理是将不在我们浏览器的可视窗口的图片不做加载，等到用户滚动到这些不在可视区域的图片时，再去加载它，这会大大优化浏览器的性能和用户体验
• 懒加载的实现方法：在页面载入时，将页面中img标签的src指向同一张小图片或白图，这是为了避免某些浏览器当加载不出来图片时会出现X的丑陋情况，这样对于服务器来说只发送请求一次，在把真正的url地址放在一个自定义的data-src属性里，然后在获取页面的中的img标签，遍历img标签，并判断它的位置是否出现在窗口的可视区域内，如果出现在可视区域内那就把真实的url地址赋给src,让对应的img图片显示出现，同时我们还可以对已经加载过的图片img标签设置一个为 isLoaded 的属性，设置为true,这样在下次执行懒加载的时候就会判断是否已经加载过，这样会有效的过滤出已加载的图片，会大大的优化页面的加载速度和性能节省。

代码题

1.代码1
2.代码2
3.代码3
本地测试成功
4.原生JS的回到顶部效果
这是最近学习到了，比jquery感觉效果更好一点，加入定时器有了平滑的过渡到顶部，不会显得太突然。