iTakeo

图片懒加载(按需加载)…

图片懒加载，也可以叫做按需加载，它是对网页性能优化的一种方案，达到节省资源，加快浏览速度的目的。各大网站都使用这个技术，例如谷歌的图片搜索页，天猫，淘宝，京东等。

其实原理也很简单，就是判断图片是否在可视区内。首先给图片的src设置一个loading图片，或者一个1像素的透明图片，然后设置一个自定义属性，比如_src，或者使用data-src，如果页面滚动的时候，图片达到可视区内的话，就把自定义属性_src赋值给src。下面就简单的介绍一下基本的代码实现过程。

下面是dom结构

//设置图片的data属性为真实地址，src可以是一张透明图片。  
<img src="images/1x1.png" data-src="images/p.jpg"> 01.
02.

下面是js代码

//函数调用，可以不传参数  
lazy.init()  
//也可以带参数，参数为容器的ID或者class  
lazy.init('#wrap');  
lazy.init('.wrap'); 01.
02.
03.
04.
05.

var lazy = {  
    //初始化函数  
    init : function(){  
        //判断需要根据哪个容器来懒加载图片，如果没有参数，则是根据document  
        var _ele = document.querySelector(arguments[0]) || document;  
        //获取容器里面所有的图片  
        var _img = _ele.querySelectorAll('img'),_this = this;  
        //初始执行一次  
        this.set(_img);  
        //给window绑定scroll事件  
        this.addEvent(window,'scroll',function(){  
            _this.set(_img)  
        });  
        //给window绑定resize事件  
        this.addEvent(window,'resize',function(){  
            _this.set(_img)  
        });  
    },  
    //设置图片  
    set : function(_img){  
        //获取可视区的高度  
        var _h = document.documentElement.clientHeight;  
        //然后循环img  
        for (var i=0;i<_img.length;i++) {  
            //判断是否出现
            if(!_img[i].off && (_img[i].getBoundingClientRect().top) <  _h ){  
                 //设置src  
                _img[i].src = _img[i].getAttribute('data-src');  
                //删除自定义_src属性  
                _img[i].removeAttribute('data-src');  
                //设置一个开关，防止每次滚动都重新修改src  
                _img[i].off = true;  
            }  
        };  
    },  
    //绑定事件  
    addEvent : function (obj,types,fn){  
        obj.attachEvent ? obj.attachEvent('on'+types,fn) : obj.addEventListener(types,fn,false)  
    }  
} 01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.