懒加载

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

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

        }

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

        $(window).scroll(function(){
            if(isShow($('#hello'))){
                console.log(true);
            }else{
                console.log(false);
            }
        })
        function isShow($node) {
            var windowHeight = $(window).height(),
                scrollTop = $(window).scrollTop(),
                offsetTop = $node.offset().top,
                nodeHeight = $node.outerHeight(true);
            if (windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight) {
                return true;
            } else {
                return false;
            }

        }

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

        $(window).scroll(function () {
            if ($('#hello').not('.load').length === 1 && isVisible($('#hello'))) {
                console.log(true);
                $('#hello').addClass('load');
            } else {
                console.log(false);
            }
        })

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

        }

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

• 在页面载入的时候将页面上的图片地址指向一张图片，等图片进入窗口可视区域时，把在自定义属性中的真实图片地址放入src属性中，实现当前区域加载。

实现视频中的图片懒加载效果

代码预览
代码

实现视频中的新闻懒加载效果

代码

test.gif