问答

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

 function isVisible($node){ }

//

<script type="text/javascript">
    function isVisible($node) {
        var $scrollTop = $(window).scrollTop(),
                $winH = $(window).height(),
                $nodeTop = $node.offset().top;
        if ($nodeTop < ($scrollTop + $winH)) {
            console.log('true')
        } else {
            console.log('false')
        }
    }
</script>

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

<div class="aa" style="height: 2000px;">1</div>
<div class="bb">2</div>
<script type="text/javascript" 
<script type="text/javascript">
    var $node = $('.bb');
    function isVisible($node) {
        $(window).on('scroll', function () {
            var top = $node.offset().top;
            var winH = $(window).height();
            var scrollH = $(window).scrollTop();
            if (top < winH + scrollH) {
                console.log(true)
            } else {
                console.log(false)
            }
        })
    }
    isVisible($node);
</script>

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

<div class="aa" style="height: 2000px;">1</div>
<div class="bb">2</div>
<script type="text/javascript" 
<script type="text/javascript">
    var $node = $('.bb');
    function isVisible($node) {
        $(window).on('scroll', function () {
            var $top = $node.offset().top,
                $winH = $(window).height(),
                $scrollH = $(window).scrollTop();

            if ($top < $winH + $scrollH) {
                if($node.attr('isLoaded')){return}
                console.log(true)
                $node.attr('isLoaded', true);
            } else {
                console.log(false)
            }
        })
    }
    isVisible($node);
</script>

4、图片懒加载的原理是什么？
首先设置所有图片的背景图为空白的（这是为了避免一些浏览器可能对没有图片的地方显示“X”造成视觉上的不完美），空白图片的URL保持一致（浏览器就不会重复加载消耗资源），当图片出现在窗口视线中的时候，执行图片链接地址的替换（如何判断图片出现在视线中呢：目标元素的offset().top 小于 $(window).height() + $(window).scrollTop() ）。