懒加载的实现

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

function isVisible($img){
        var scrollTop  = $(window).scrollTop()
        var windowHeight = $(window).height()
        var imgTop = $img.offset().top
        var imgHeight = $img.outerHeight(true)
        if (imgTop <= scrollTop + windowHeight && scrollTop < imgTop + imgHeight){
            return true;
        }
        return false;
    }

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

    function isShowLog($img){
        if (isVisible($img)){
            console.log('target 1 is show')
            return true;
        }
        console.log('false')
        return false;
    }

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

    function showOneTimeLog($img){
        if (!$img.hasClass('showNow') && isVisible($img)){
            $img.addClass('showNow')
            console.log('|target 2 is show|')
            return true;
        }
        return false;
    }

题目4： 图片懒加载的原理是什么？
在页面加载图片时，不将图片一次性全部下载，而是只将显示在屏幕中或者可能即将显示在屏幕中的图片进行下载并加载到文档流中。

效果预览