原生JS实现图片懒加载 其实和那个JQ的lazyout插件的效果差不多

    <li>
        <img data-src="http://7.jpg" src="https://2017/10/30/21e7cdf76af69d9be6a108dd5f27b3a3"/>
    </li>
    <li>
        <img data-src="http://7.jpg" src="https://2017/10/30/21e7cdf76af69d9be6a108dd5f27b3a3"/>
    </li>
    <li>
        <img data-src="http://7.jpg" src="https://2017/10/30/21e7cdf76af69d9be6a108dd5f27b3a3"/>
    </li>
    <li>
        <img data-src="http://7.jpg" src="https://2017/10/30/21e7cdf76af69d9be6a108dd5f27b3a3"/>
    </li>


 <script>
    var lazy = {
        init:function (){
            var _ele = document.querySelector(arguments[0]) || document;
            var _img = _ele.querySelectorAll("img");
            this.set(_img);
            this.addEvent(window,'scroll',function (){
                this.set(_img);
            }.bind(this));
            this.addEvent(window,'resize',function (){
                this.set(_img);
            }.bind(this));
        },
        set:function (_img){
            var _h = document.documentElement.clientHeight;
            for(var i=0; i<_img.length; i++){
                if( !_img[i].off && _img[i].getBoundingClientRect().top < _h){
                    _img[i].setAttribute("src",_img[i].getAttribute("data-src"));
                    _img[i].removeAttribute("data-src");
                    _img[i].off = true;
                }
            }
        },
        addEvent:function (obj,type,fn){
            obj.attachEvent? obj.attachEvent("on"+type,fn) : obj.addEventListener(type,fn,false);
        }
    }
    lazy.init('ul');
</script>

也没什么好解释的，一看就明白，喜欢原生JS