进阶16 懒加载

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

function isVisible($node){
        var windowHeight = $(window).height(),
            offsetHeight = $node.offset().top,
            scrollTop = $(window).scrollTop()
            nodeHeight = $node.height()

        if(scrollTop + windowHeight > offsetHeight && scrollTop < offsetHeight + nodeHeight){
            return true
        }else {
            return false
        }
    }

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

$(window).on('scroll', function(){
        isVisible(('#hello'))
    })

function isVisible($node){
        var windowHeight = $(window).height(),
            offsetHeight = $node.offset().top,
            scrollTop = $(window).scrollTop()
            nodeHeight = $node.height()

        if(scrollTop + windowHeight > offsetHeight && scrollTop < offsetHeight + nodeHeight){
            return true
        }else {
            return false
        }
    }

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

var $img = $('.imgs').eq(0)
    $(window).on('scroll', function(){
        if(isVisible($img) && !($img).hasClass('show')){
            $img.addClass('show')
        }
    })

    function isVisible($node){
            var windowHeight = $(window).height(),
                offsetHeight = $node.offset().top,
                scrollTop = $(window).scrollTop()
                nodeHeight = $node.height()

            if(scrollTop + windowHeight > offsetHeight && scrollTop < offsetHeight + nodeHeight){
                return true
            }else {
                return false
            }
        }

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

通过判断图片是否进入到可视区域，如果是，则给img标签的src属性赋值，使其展现

5、实现图片的懒加载

代码
效果预览

6、实现视频中的新闻懒加载效果

代码

效果