进阶16 懒加载

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

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

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

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

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

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

var isShow=false;
$(window).on('scroll',function(){
  if(isVisible($('#show'))&&!isShow){
     isShow=true
     console.log('true')
  }
})

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

(题目3-demo)[http://js.jirengu.com/gewut/1/edit?html,js,output]

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

• 懒加载的意义：
  当有很多图片要加载时，我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样可以减轻服务器负担，提升用户体验。
• 实现原理：
  在页面载入时，先将img标签的“src”设为空或一个占位图片，图片真实的地址存储在img一个自定义的属性里，<img src="lazy-load.png" data-src="xxx" />，当页面滚动时，遍历所有图片，判断当其出现在窗口视野中时，再把data-src里的值赋给该img标签的src中。

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

JSBin-懒加载

题目6：实现如下 新闻自动懒加载效果 （这里是参考代码， 其中html里的为前端代码， js 里的内容为 router.js里的后端代码， 也可参考往期班级视频（视频列表中最后一个：jQuery之新闻自动加载）