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

function isVisible($node){
    var winH = $(window).height(), 
        winS = $(window).scrollTop(),
        nodeHeight = $node.height(),
        nodeTop = $node.offset().top;
        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){
            return true;
        }else{
            return false;
        }
}

---

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

function isVisible($node){
    $(window).on('scroll',function(){
        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;
        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){
            console.log(true);
        }else{
            console.log(false);
        }
    });
}
isVisible($node);

---

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

function isVisible($node){
    $(window).on('scroll',function(){
        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;
        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){
            if(!$node.attr("data-sc")){
                console.log(true);
                $node.attr("data-sc",true); 
            }else{
                return;
            }
        }else{
            return;
        }
    });
}
isVisible($node);

---

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

在页面载入的时候将页面的img的地址指向一个小的的同样的白色图片，将真实的图片地址放在创建的自定义属性中如：
<img src="small.png" data-src="true.png">
src为小图地址，data-src为真实地址。
当图片出现在窗口可视区域时，将自定义属性里的真实图片地址赋给src为懒加载的实现原理。

---

代码

在线demo

---

• 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处