懒加载

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

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

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

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


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

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

check();

    $(window).on('scroll', check()); 

    function check(){
        $node.not('.load').each(function(){
        if(isVisible($(this))){
            console.log(true);
            }
        });
    }


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

    function show($node){
        $node.each(function(){
            var imgUrl = $(this).attr('data-src');
            $(this).attr('src', imgUrl);
            $(this).addClass('load');
        });    
    }

题目4： 图片懒加载的原理是什么？
先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

图片延迟加载主要是用来解决一个页面中图片太多，导致打开页面的时候一次性加载太多图片导致打开速度慢的问题。现在在很多网站上都用得很多，比如说微店，淘宝等一些图片量较大的网站，采取懒加载也是利于用户体验。

原理即是网页代码中有img标签，但是没有src属性，只是把src原本应该放的图片链接放到另外一个属性值去，比如说data-src，这样浏览器就不能把图片渲染出来。但是可以通过js获取这个图片链接，通过适时把获取到的图片链接赋值给src属性上，这样图片就能在适时的时候渲染出来，而不是一次性全部加载，而是通过鼠标滚动，一个一个加载进来。

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

题目6： 实现视频中的新闻懒加载效果