soImgPreload
soImgPreload是一个图片预加载库。原生javascript构建，兼容性良好，可用于浏览器环境的图片预加载。
特点
- 极小的。打包的文件只有2kb
- 兼容性良好，使用原生js 构建，不用使用babel 即可大胆在项目中使用
- 可限制同时预加载图片的数量，避免占用过多宽带
安装
Install with npm:
npm install so-img-preload
Include via jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/so-img-preload"></script>使用
let loadImgArr = ['http://lorempixel.com/1600/900/?v=' + Date.now(), 'http://lorempixel.com/1600/901/?v=' + Date.now(), 'http://lorempixel.com/1600/902/?v=' + Date.now()]
soImgPreload(loadImgArr, {
// limit: 2, // 限制同时预加载图片的数量。Number 类型
/**
* 每有一张图片加载完成就会回调
* @param {Object} item - 该图片的相关数据
* @param {String} item.status [success|fail] - 图片加载成功还是失败
* @param {Number} item.index - 该图片在图片集合里的下标
* @param {String} item.url - 该图片的url
* @param {Number} item.time - 该图片加载的时长，单位ms
* @param {Object} speed - 加载进度信息
* @param {Number} speed.success - 当前已加载成功图片的数量
* @param {Number} speed.fail - 当前已加载失败图片的数量
* @param {Number} speed.total - 图片的总数量
* @param {Number} speed.totalTime - 加载到该图片已占用的时长，单位ms
*/
each: function (item, speed) {
console.log('有一张图片加载完成')
console.log(item)
console.log(speed)
},
/**
* 所有图片加载完成触发
* @param {Array<item>} itemArr - 所有图片项的集合
* @param {Object} statistics - 统计
* @param {Number} statistics.success - 加载成功图片的数量
* @param {Number} statistics.fail - 加载失败图片的数量
* @param {Number} statistics.total - 图片的总数量
* @param {Number} statistics.totalTime - 加载图片总占用的时长，单位ms
*/
all: function (itemArr, statistics) {
console.log('所有图片加载完成')
console.log(itemArr)
console.log(statistics)
}
})Options
limit
Default: None
限制同时预加载图片的数量。
each
Default: None
每加载完成一张图片的回调。
all
Default: None
所有图片加载完成的回调。