懒加载

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

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

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

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

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

var isVis = false;          //设置一个标志位
$(window).on("scroll",function(){
if(!isVis){
    isVisible($(".test")); //不可见才进入isVisible函数
}
else{
    return; //一旦标志位为true，那么就不做任何处理
}
})
function isVisible($node){
var winH = $(window).height(),
    offsetY = $node.offset().top;
if( (scrollY+winH) > offsetY ){
    console.log("true");
    isVis = true;   //第一次出现，设为true
    return true;
}
else{
    console.log("false");
    return false;
}
}

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

在图片加载前可以将图片设置为一个空白的图片或者加载中图片，在图片可视(offsetH < winH + scrollH)时将图片通过设置ajax 或者 data属性来加载图片，这样就能避免加载网页同时加载大量图片引起的页面卡顿情况。

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