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

原生JS

<script>
var node = document.getElementsByClassName('box')[16];

function isVisible(node) {
    //窗口可视大小
    var window_height = document.documentElement.clientHeight;
    //元素至文档顶部的距离
    var offsetTop = node.offsetTop;
    //文档滚动的距离
    var scrollTop = document.documentElement.scrollTop;
    //元素高度
    var eleHeight = parseInt(getComputedStyle(node).height);

    if (offsetTop < scrollTop + window_height && scrollTop < eleHeight + offsetTop) {
        console.log('元素在可视区');
        return true
    } else {
        console.log('元素不在可视区');
        return false
    }
}
isVisible(node);
</script>

JQ

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
function isVisible(node) {
    //窗口高度
    var window_height = $(window).height();
    //文档滚动高度
    var srollTop = $(window).scrollTop();
    //元素到文档顶部的距离
    var offsetTop = $(node).offset().top;
    //元素自身高度
    var height = $(node).height();

    if (window_height + srollTop > offsetTop && srollTop < offsetTop + height) {
        console.log('元素在窗口中');
    } else {
        console.log('元素不在窗口中');
    }

}
isVisible(node);
</script>

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

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var node = '#box18';

$(window).on('scroll', function(event) {
    event.preventDefault();
    if (isVisible(node)) {
        //给node添加一个属性来作为判断的条件
            console.log(true);
        }
    }
});

function isVisible(node) {
    //窗口高度
    var window_height = $(window).height();
    //文档滚动高度
    var srollTop = $(window).scrollTop();
    //元素到文档顶部的距离
    var offsetTop = $(node).offset().top;
    //元素自身高度
    var height = $(node).height();

    if (window_height + srollTop > offsetTop && srollTop < offsetTop + height) {
        // console.log('元素在窗口中');
        return true
    } else {
        // console.log('元素不在窗口中');
        return false
    }
}

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

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var node = '#box18';

$(window).on('scroll', function(event) {
    event.preventDefault();
    if (isVisible(node)) {
        //给node添加一个属性来作为判断的条件
        if (isLoaded(node)) {
            console.log(true);
            $(node).data('loaded', true);
            return
        }
    }
});

function isVisible(node) {
    //窗口高度
    var window_height = $(window).height();
    //文档滚动高度
    var srollTop = $(window).scrollTop();
    //元素到文档顶部的距离
    var offsetTop = $(node).offset().top;
    //元素自身高度
    var height = $(node).height();

    if (window_height + srollTop > offsetTop && srollTop < offsetTop + height) {
        // console.log('元素在窗口中');
        return true
    } else {
        // console.log('元素不在窗口中');
        return false
    }
}
//已经加载过就添加一个自定义属性
function isLoaded(node) {
    if ($(node).data('loaded')) {
        return false;
    } else {
        $(node).data('loaded', true);
        return true;
    }
}
</script>

代码演示

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

图片还没进入可视范围内之前，img标签的src属性为空，进入可视范围之后再把src属性修改为实际的图片地址，可以避免网页同时加载大量图片出现卡顿情况。

题目5

代码演示

<script type="text/javascript">
    var clock
    //一上来就调用加载可视区图片
    lazyRender();
    $(window).on('scroll', function(event) {
        //设置定时器优化防止过多的滚动事件调用lazyRender事件
        if (clock) {
            clearTimeout(clock);
        }
        clock = setTimeout(function function_name() {
            lazyRender();
        },100)
        
    });

    function lazyRender() {
        $('.container img').each(function(index, el) {
            var $node = $(this);
            if (isVisible($node) && !isLoaded($node)) {
                imgLoad($node);
            }
        });
    }

    function isVisible($node) {
        //窗口高度
        var window_height = $(window).height();
        //文档滚动高度
        var srollTop = $(window).scrollTop();
        //元素到文档顶部的距离
        var offsetTop = $node.offset().top;
        //元素自身高度
        var height = $node.height();

        if (window_height + srollTop > offsetTop && srollTop < offsetTop + height) {
            // console.log('元素在窗口中');
            return true
        } else {
            // console.log('元素不在窗口中');
            return false
        }
    }
    //已经加载过就添加一个自定义属性
    function isLoaded($node) {
        if ($node.data('loaded')) {
            return true;
        } else {
            $node.data('loaded', true);
            return false;
        }
    }
    //加载图片
    function imgLoad($node) {
        $node.attr('src', $node.attr('data-src'));
    }
    </script>