jquery懒加载、回到顶部

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

function isVisible($node){
        var $scrollTop=$(window).scrollTop();//窗口相对于滚动条顶部的偏移距离
        var $windowHeight=$(window).height();//窗口的高度
        var $nodeOffsetTop=$node.offset().top;//元素在窗口中的高度范围

        if($windowHeight+$scrollTop>$nodeOffsetTop){
            return true;
        }else{
            return false;
        }
    }

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

<script>
        function isVisible($node){
            var $scrollTop=$(window).scrollTop();
            var $windowHeight=$(window).height();
            var $nodeOffsetTop=$node.offset().top;

            if($windowHeight+$scrollTop>$nodeOffsetTop){
                return true;
            }else{
                return false;
            }
        }
                         
        $(window).on("scroll",function(){
            var result=isVisible($("p"));
            if(result){
                console.log(result);
            }
        });
    </script>

预览效果

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

<script>
        function isVisible($node){
            var $scrollTop=$(window).scrollTop();
            var $windowHeight=$(window).height();
            var $nodeOffsetTop=$node.offset().top;

            if($windowHeight+$scrollTop>$nodeOffsetTop){
                return true;
            }else{
                return false;
            }
        }   
        var cansee=false;           
        $(window).on("scroll",function(){
            if(cansee==true){
                return;
            }
            var result=isVisible($("p"));
            if(result){
                console.log(result);
                cansee=true;
            }       
        });
    </script>

预览效果

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

1.为什么要懒加载
如果一个页面包含了非常多的图片，当用户打开这个页面的时候，浏览器需要一次性加载这些图片，花费很长时间，也容易造成浏览器崩溃卡死，影响用户体验。因此，当页面又大量图片时，需要用到懒加载。
2.懒加载原理
浏览器只加载用户可视区域的图片，当用户下拉浏览器时，才加载下一部分图片。把真实的图片地址存放在一个自定义属性中，可以用data-src来存放。<img src="loading.gif" data-src="http://xxx.ooo.com" />当浏览器下拉到该图片的可视区域时，在把data-src里面的图片地址赋给src属性里面。

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