当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

通俗一点：

1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。
2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。 ps：自定义属性可以取任何名字

HTML代码如下：

<img data-src="真正要加载的图片地址" src="这个是占位图,如等待加载图" >

jq代码：

<script>

start()

$__(window).on('scroll', function(){
    start()
})

function start(){
    $('.pics_content img').not('[data-isLoaded]').each(function(){
        var $node = $(this)
        if( isShow($node) ){
            loadImg($node)
        }
    })
}

//判断一个元素是不是出现在窗口(视野)
function isShow($node){
    return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

//加载图片
function loadImg($img){
    $img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
    $img.attr('data-isLoaded', 1)//已加载的图片做标记
}
</script>