懒加载

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

function isVisiable($node) {
    var windowHeight = $(window).height();
    var windowScrollTop = $(window).scrollTop();
    var nodeOffsetTop = $node.offset().top;

    // windowHeight + windowScrollTop > nodeOffsetTop 的情况下，表示$node在可视区
    if (windowHeight + windowScrollTop > nodeOffsetTop) {
        return true;
    }

    return false;
}

---

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

http://js.jirengu.com/nuyuj/4/edit

image.png

---

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

http://js.jirengu.com/fuhip/7/edit

image.png

---

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

懒加载的原理是通过自定义属性标签data-src存放图片的src属性，当img标签出现在浏览器窗口范围内时，将图片的src属性赋值，复制后图片会开始加载，达到懒加载的效果。
这种方法避免打开网页后一次性加载所有图片，减少了流量的消耗，同时提高了用户体验。

5. 实现视频中的图片懒加载效果

http://js.jirengu.com/qojab/3/edit

image.png