提升性能-懒加载

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

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

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

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

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

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

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

$(window).on('scroll',function(){
  if(isShow($node.not('.show'))){
    console.log('true');
    $node.addClass('show')
  }
})

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

首先，为什么要让图片懒加载，因为一个网站的图片可能会非常多，当我们打开一个网页时，如果页面中的所有图片都同时加载的话，可能会造成网页卡顿的情况，此时加载网页中靠下的图片也是没有太大意义的，因为此时用户根本看不见，所以我们要让图片出现在窗口范围内再加载，这样不仅提升了网页性能，也节省了网络资源，这就是懒加载的原理。

• 具体技术实现：

一开始给图片的src设置统一的地址，展示菊花图，同时给每一个图片设置自定义属性data-src，属性值为真正的图片url，当图片出现在窗口中时，将src的默认地址替换为data-src的属性值，这样就实现了图片的懒加载

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

图片懒加载

图片懒加载

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

新闻懒加载