懒加载

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

function isVisible($node){ 
    return ($node.offset().top<$(window).height()+$(window).scrollTop())&&\
    ($node.offset().top>$(window).scrollTop())
}

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

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

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

var isFirst = true
$(window).on('scroll',function(){
    if(!isFirst){
        return;
    }
    if(isVisible($('li').eq(8))&&isFirst){
      console.log(true)
      isFirst = false;
    }
})

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

1.什么是懒加载？
在一些图片，文字，视频等内容较多的网站上用户，打开网站会同时加载所有网站内容，用户网速不好时会造成卡顿，体验不好。而为了提高用户体验，即对网站内容进行懒加载，即当内容出现在浏览器窗口时再去加载，这样，一次加载的内容变少，不会造成浏览器的卡顿，提高用户体验。
2.实现原理
懒加载的实现原理很简单，以图片为例，就是把img标签的src设置为空或是一张白图（所有图片都设置为同一张白图，浏览器会缓存而不会重复加载），而把图片地址放在其他地方，比如自定义属性data-src，然后，对图片进行判断，当图片出现在用户窗口时，通过jquery将data-src中图片地址赋值给src，浏览器就会发出请求，加载图片。

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

效果
demo

题目6(选做)： 实现如下 新闻自动懒加载效果59 （这里是参考代码259， 其中html里的为前端代码， js 里的内容为 router.js里的后端代码， 也可参考往前班级视频254)