懒加载

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

function isVisible($node) {
    var scrollTop = $(window).scrollTop();  //滑轮滚动的距离
    var windowHeight = $(window).height();  //浏览器窗口的高度
    var offsetTop = $node.offset().top;  //$node 到页面顶部的距离
    if(offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop) {
        return true;
    }
    return false;
}

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

function isVisible($node) {
    var scrollTop = $(window).scrollTop();  //滑轮滚动的距离
    var windowHeight = $(window).height();  //浏览器窗口的高度
    var offsetTop = $node.offset().top;  //$node 到页面顶部的距离
    if(offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop) {
        return true;
    }
    return false;
}

$(window).on('scroll', function () {
    if (isVisible($node)){
        console.log(true)
    }
})

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

function isVisible($node) {
    var scrollTop = $(window).scrollTop();  //滑轮滚动的距离
    var windowHeight = $(window).height();  //浏览器窗口的高度
    var offsetTop = $node.offset().top;  //$node 到页面顶部的距离
    if(offsetTop < scrollTop + windowHeight && offsetTop + $node.height() > scrollTop) {
        return true;
    }
    return false;
}

var isEleVisible = false;
function check() {
    $(window).on('scroll', function () {
        if (isVisible($node) && !isEleVisible){
            console.log(true)
        }
        isEleVisible = true;
    })
}

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

• 为什么要懒加载：对于图片过多的页面，为了加速页面加载速度，
  所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
• 实现原理：在页面载入时，将 img 标签的 src 属性指向一个占位图，将真正的 src 地址存在一个自定义属性内，当浏览器窗口移动到 img 上面时将 img 的 src 更换为正确的地址。
• 实现流程：当网页滚动事件被触发 ➡️ 执行加载图片操作 ➡️ 判断图片是否在可视区且是否已经加载过 ➡️ 在可视区且未被加载过则动态地将 data-src 的值赋给该图片的 src 属性。
• 关键点：判断图片加载的时机，当窗口移动到其上面时加载图片。

5. 实现图片懒加载效果

• 预览效果