懒加载

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

      function isVisible(node) {
            var offfsetTop = node.offset().top;
            var scrollTop = $(window).scrollTop();
            var height = node.height();
            var windowHeight = $(window).height();
            if (scrollTop + windowHeight > offfsetTop && scrollTop < offfsetTop + height) {
                console.log("可见");

            }
            else {
                console.log("不可见");
            }
        }

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

    $div = $("div");
    $(window).on("scroll", function () {
        isVisible($div);
    });

    var isVisible = function (node) {
        var offfsetTop = node.offset().top;
        var scrollTop = $(window).scrollTop();
        var height = node.height();
        var windowHeight = $(window).height();
        if (scrollTop + windowHeight > offfsetTop && scrollTop < offfsetTop + height) {
            console.log(true);

        }
        else {
            console.log(false);
        }

    };

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

    $div = $("div");
    var clock = 0;
    $(window).on("scroll", function () {
        isVisible($div);
    });

    var isVisible = function (node) {
        if (clock === 0) {
        var offfsetTop = node.offset().top;
        var scrollTop = $(window).scrollTop();
        var height = node.height();
        var windowHeight = $(window).height();
            if (scrollTop + windowHeight > offfsetTop && scrollTop < offfsetTop + height) {
                clock=1;
                console.log(true);
            }
            else{
                    console.log(false);
                }
            }
        }

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

img的src路径可以设置为预加载，真实的图片路径保存在自定义data-src属性里
当页面滚动的时候触发事件检测图片是否被视野范围内，出现的话把img的src路径替换成data-src，设置一个状态锁当替换一次路径之后不再有动作