懒加载-回到顶部

问答：

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

当一个元素的底部不超过浏览器的上边缘（元素本身的高度+元素在文档中的的高度>滚动条滚动的距离），顶部不超过浏览器的下边缘（元素在文档中的高度<窗口的高度+滚动条滚动的距离），就可以说这个元素是在窗口的可视范围之内的。

    function isVisible($node){
        var nodeH = $node.height();//获取元素本身的高度
        var nodeTop = $node.offset().top;//获取元素在文档中的高度
        var scrollTop = $(window).scrollTop();//获取滚动条滚动的距离
        var winH = $(window).height();//获取窗口的高度。
        return (nodeH+nodeTop > scrollTop && nodeTop < scrollTop + winH ) ? true : false//条件判断。
    }

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

    $(window).on("scroll",function(){//对窗口添加滚动事件监听
        if(isVisible($node)){//如果函数返回为true时，即代表指定元素出现在窗口可视范围内
            console.log(true);//控制台打印true。
        }
    });
    function isVisible($node){
        var nodeH = $node.offset().top;//获取元素在文档中的高度
        var scrollTop = $(window).scrollTop();//获取滚动条滚动的距离
        var winH = $(window).height();//获取窗口的高度。
        return (nodeH < scrollTop + winH) ? true : false//进行距离判断。
    }

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

    var isLoad; //设置一个状态锁
    $(window).on("scroll",function(){
        if(isVisible($node) && isLoad){//如果函数返回为true，且状态锁为true时，控制台才打印true
            console.log(true);
            isLoad = false;//当元素第一次出现并且执行代码后，使状态锁为false，这样元素下次再出现时不在做任何处理。
        }
    });
    function isVisible($node){
        var nodeH = $node.offset().top;//获取元素在文档中的高度
        var scrollTop = $(window).scrollTop();//获取滚动条滚动的距离
        var winH = $(window).height();//获取窗口的高度。
        return (nodeH < scrollTop + winH) ? true : false//进行距离判断。
    }；

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

将图片地址存放在自定义属性中，当完成某种事件操作后，再将图片地址放在正常的img属性中，完成图片的加载。这样做的好处是能大大减少网页加载的时间。

代码：

1.实现如下回到顶部效果,当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部。

代码地址
预览地址

2.实现如下图片懒加载效果

代码地址
预览地址

3.实现如下无限滚动效果

代码地址
预览地址
代码3本地测试成功。

---

本文版权归本人和饥人谷所有，转载请注明来源。