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 。用代码实现

预览效果

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

预览效果

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

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

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