1.前言

为什么使用懒加载？

原因很简单：在页面中（尤其是很长的页面中）一次性加载所有图片，网络请求代价太高，想象一下看官老爷想去买一件衣服，光首页加载图片就花掉几分钟，是不是感觉吃了shi？

什么是懒加载？

明白了上面的场景之后，懒加载就很好解释了：在需要的时候加载图片
也就引出了懒加载的原理：

1. 当window检测到需要加载的内容出现在window边缘，就加载
2. 否则不对img 标签中的src赋值

function：判断时候出现在屏幕边缘 返回值为ture或者false

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

function: 将图片标签中的data-src自定义属性中的值（真正的图片url）复制给图片中的src以加载图片

function showImg($imgs){
            $imgs.each(function(){
                var imgUrl = $(this).attr('data-src');
            $(this).attr('src',imgUrl);
            $(this).addClass('shown');
            })
            }

让我们愉快的把两个函数串联起来～

        $(window).on('scroll',function(){
            $('.container img').not('.shown').each(function(){
                
                if(isShow($(this))){
                    showImg($(this))
                }
            })
        }) 

我的github主页可以下载