懒加载

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

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

---

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

        function isVisible($node){
            var windowHeight = $(window).height();
            var nodeHeight = $(node).offset().top;
            var scrollHeight = $(window).scrollTop();
            if(nodeHeight < windowHeight + scrollHeight && nodeHeight > scrollHeight){
                return true;
            }
            return false;
        }
        $(window).on("scroll",function(){
            if(isVisible($node)){
                console.log(true);
            }else{
                console.log(false);
            }
        })

---

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

         var $node = $("node");
         $node.data("attri",false);
         console.log($node.data("attri"));
        function isVisible($node){
            var windowHeight = $(window).height();
            var nodeHeight = $(node).offset().top;
            var scrollHeight = $(window).scrollTop();
            if(nodeHeight < windowHeight + scrollHeight && nodeHeight > scrollHeight){
                return true;
            }
            return false;
        }
        $(window).on("scroll",function(){
            if(isVisible($node) && !$node.data("attri")){
                console.log(true);
                $node.data("attri","true");
            }else{
                console.log(false);
            }
        })

---

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

当窗口滚动的时，触发窗口滚动时间，判断图片元素节点是否出现在窗口可视范围并且是否第一次出现，如出现且第一次出现，则加载图片。