img-lib

图片优化插件: 包括图片惰性加载，缓存等功能，图片大小检测，webp格式适配
主要面向移动端，PC端不支持IE8及以下。

使用

安装：

你可以通过git直接下载安装

git clone https://github.com/SIPC115/img-lib

利用 115私有npm仓库

你也可以利用115私有npm进行安装

//如果没有nrm建议利用nrm来管理npm源
npm install nrm -g  
nrm add sipc115 http://59.67.152.41:4873  
nrm use sipc115
//安装img-lib插件
npm install img-lib --save

项目中引用 lib/img.js, 注意：src中为ES6的开发代码，不建议引入

<script src="img.js"></script>  

初始化设置

在js代码中，我们加入对插件的初始化配置内容

SI.img({
    lazyWidth: 0,     //预加载当前屏幕以右边lazyWidth内的图片，默认0
    lazyHeight: 0,    //预加载当前屏幕以下lazyHeight内的图片，默认0
    realSrc: "data-src",  //图片路径放置属性
    class: "img-load",    //惰性加载的图片必须的类名
    cachePrefix: "img_cache_url_",    //图片缓存前缀  
    cachePoolName: "img_cache_pool",  //图片缓存池名
    cachePoolLength: 50,              //图片缓存池长度
    wait: 100,                        //节流函数等待时间(谨慎修改)
    fadeIn: null                      //图片显示后调用的函数
})  

图片惰性加载

1. 普通图片

为需要惰性加载的图片添加img-load类名，将图片路径写在data-src中

<img data-src="http://..." class="img-load">

2. 背景图片

如果需要对背景图片进行惰性加载，同样可以按照img的方式设置，如下：

<div data-src="http://....." class="img-load">...</div> 

这种需求很常见，例如移动端商品展示的时候，为了让商品图片没有加载好之前，图片展示位置缩回。通常 用div的背景图片做商品图片展示，给一个padding-top: 100%;属性就好。

3. 不同设备做不同区分

在代码loadImg中，我们保留了对图片加载的判断接口(使用者可以根据网络环境，设备等问题，考虑是否开启惰性加载)

图片缓存

将需要缓存的图片加上data-cache=1的属性

<img data-cache=1 data-src="http://....." class="img-load">  

这样的图片信息在首次加载完毕后，会以base64的格式存储在localStorage中，下次加载页面时，会直接拉去localStorage 中的图片数据。使用图片缓存需要注意一下问题：

• 缓存图片的数量默认为50，请保证你缓存的图片总大小不会超过 localStorage容量上限
• 注意缓存的图片被自动打上 crossOrigin="anonymous" 属性（如果你的开启图片共享有可能存在安全问题，不建议开启）。

webp格式替换

目前src中的代码引入了，对webp图片格式的探测。因为webp格式目前只能在chrome中使用，所以需要有专门的图片地址 来提供webp格式图片。这部分内容需要在实际应用中调整。

图片的优化

暂未正式使用

DEMO 地址

示例demo

Changelog

1.0.0

1. 完成组件的基本架构
2. 完成图片惰性加载功能
3. 完成图片base64缓存功能

1.0.1

1. 修复背景图片加载失败的BUG