懒加载

原理：

         首先将img的真正的地址存放在一个自定义属性内，例如data-img. 而src属性存放的是一张空白图片。

         接下来，当滚动条发生滚动时，判断图片是否在可视区域内，如果在可视区域内，则将data-img的值赋给src

代码实现：

• 既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首先我们写一个函数判断元素是否出现在可视范围内：

function isVisible($node){
    var winH = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offSetTop = $node.offSet().top;
    if (offSetTop < winH + scrollTop) {
        return true;
    } else {
        return false;
    }
}

　　

• 再添加上浏览器的事件监听函数，让浏览器每次滚动就检查元素是否出现在窗口可视范围内：

$(window).on("scroll", function{
    if (isVisible($node)){
        console.log(true);
    }
})

　　详细代码：https://github.com/Chris0918/lazyLoad