lazyload懒加载的使用

懒加载的意义（为什么要使用懒加载）

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

懒加载的使用

1.引用< script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?20121015">

2.对于要懒加载的图片进行如下属性设置。< img src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://img03.taobaocdn.com/tps/i3/T1xl4_FlFaXXcLmU_5-305-317.png" />
其中src为未加载时的图片，dataimg为实际要加载的图片。

3.执行lazyload.init();

4.分tab的懒加载。判断tab把下面的图片有没加载过。根据loaded属性判断，还要对非当前tab所属的图片进行class lazy去掉。对已加载的loaded为true的图片，不加lazy属性

5.注意lazyload.init()的执行时机，如果在dom ready阶段执行，会下载所有图片，不能实现懒加载。要在winow.onload完成这个阶段去执行。

代码实例

    
        
        
        
    

    
        

            ![](http://upload-images.jianshu.io/upload_images/6857128-38e3ae1aa6324e92.gif?imageMogr2/auto-orient/strip)
        
        

            ![](http://upload-images.jianshu.io/upload_images/6857128-38e3ae1aa6324e92.gif?imageMogr2/auto-orient/strip)
        
        

            ![](http://upload-images.jianshu.io/upload_images/6857128-38e3ae1aa6324e92.gif?imageMogr2/auto-orient/strip)
        
        

            ![](http://upload-images.jianshu.io/upload_images/6857128-38e3ae1aa6324e92.gif?imageMogr2/auto-orient/strip)
        
        

            ![](http://upload-images.jianshu.io/upload_images/6857128-38e3ae1aa6324e92.gif?imageMogr2/auto-orient/strip)
        
        

            ![](http://upload-images.jianshu.io/upload_images/6857128-38e3ae1aa6324e92.gif?imageMogr2/auto-orient/strip)
        
        

            ![](http://upload-images.jianshu.io/upload_images/6857128-38e3ae1aa6324e92.gif?imageMogr2/auto-orient/strip)
        
        

            ![](http://upload-images.jianshu.io/upload_images/6857128-38e3ae1aa6324e92.gif?imageMogr2/auto-orient/strip)