懒加载

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

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

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

var flag = ture;
$(window).scroll(funtion() {
    isVisible($node);
});

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

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

var flag = ture;
$(window).scroll(funtion() {
    isVisible($node);
});

function isVisible($node) {
    var $winHeight = $(window).height();
    var $nodeHeight = $node.outerHeight();
    var $offsetTop = $node.offset().top;
    var $scrollTop = $(window).scrollTop(); 
    if ($winHeight + $scrollTop > $offsetTop && $scrollTop < $offsetTop + $nodeHeight) 
    {
        if(flag)
        {
            console.log('true');
            flag = false;
        }
        return;
    }
}

4.图片懒加载的原理是什么？

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张空白图片路径，只有当图片出现在浏览器的可视区域内时，才为它设置真正的路径，让图片显示出来。以此降低同一时间的网络请求。