懒加载

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

    function isVisible($img) {
        var scrollTop = $(window).scrollTop()
        var windowHeight = $(window).height()
        var offsetTop = $img.offset().top
        if (offsetTop  < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true
        }
        return false
    }

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

var $elem = $('#elem')
$(window).on('scroll', function() {
    if(isVisible($elem)) {
        console.log('true')
    }
})
function isVisible($node) {
    var nodeT = $node.offset().top
    var nodeH = $node.outerHeight()
    var windowH = $(window).height()
    var scrollT = $(window).scrollTop()
    if(nodeT + nodeH > scrollT  && nodeT < windowH + scrollT) {
        return true
    }
    return false
}

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

var $elem = $('#elem')
var hasVisible = false
$(window).on('scroll', function() {
    if(hasVisible) {
        return
    }
    if(isVisible($elem)) {
        console.log('true')
        hasVisible = true
    }
})
function isVisible($node) {
    var nodeT = $node.offset().top
    var nodeH = $node.outerHeight()
    var windowH = $(window).height()
    var scrollT = $(window).scrollTop()
    if(nodeT + nodeH > scrollT  && nodeT < windowH + scrollT) {
        return true
    }
    return false
}

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

将图片的src设为空或者同张空白图片
设置一个自定义属性存储url
当元素出现在窗口显示范围内是，将src的值设置为自定义属性的值，实现图片加载
加载过的图片不再次操作

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

http://js.jirengu.com/humudosono/2/edit