懒加载

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

 function isVisible($node){
 var wTop = $(window).scrollTop();
            var wH = window.innerHeight;
            if($node){
                if(wH+wTop>$node.offset().top&&$node.offset().top>wTop){
                    return true ;
                }else{
                    return false ;
                }
            }
 }

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

22222222222222

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

33333333333333

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

图片的懒加载就是将图片较多的页面进行图片依据滚动到当前页面的条件加载。在加载之前将图片使用空白或占位图加载，在滚动条滚动至图片位置出现在浏览器视图窗口中时进行加载，从而避免了同时加载大量图片引起的服务端返回资源过多发生阻塞的情况
步骤：

1. 首先要判断图片是否出现在了可视的窗口：屏幕滚动的高度+窗口的高度>图片距离页面顶部的距离 && 屏幕滚动的高度>图片距离页面顶部的距离+图片所在的元素的高度，这就是可视的范围了
2. 接下来该准备修改图片的src了。可以给img的src放同样一张图片，这样只会发起一次请求，然后在img中创建一个属性(比如data-src),放入展示给用户的图片。
3. 当图片到了用户的可视窗口范围，把img的src地址换成data-src的地址，这样图片就会被加载了。

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

55555555555555555