z-preloader

Overview

实现图片的预加载功能，并且可以查看图片的加载进度

安装及引入

Install z-preloader

npm install z-preloader

Import z-preloader

ES6/commonjs import style is supported.

// ES6
import preloader from 'z-preloader';

// commonjs
var preloader = require("z-preloader");

or link as a script in an html file.

<script src="dist/z-preloader.js"></script>

使用

// imageData 可以是json
// url 是必须的，其他信息可根据需要自行添加
let imageData = [{
    name: images1,
    url: imageUrl
},{
    name: images1,
    url: imageUrl
},{
    name: images1,
    url: imageUrl
}]
// 或者 imageData 可以是数组
let imageData = [imageUrl, imageUrl, imageUrl]

const options = {
    resources: imageData, //imageData expected a JSON or Array
    onStart: function(total) {
        console.log('onStart:' + total)
    },
    onProgress: function(currentIndex, total) {
        console.log('onProgress:' + currentIndex + '/' + total)
    },
    onComplete: function(total,result) {
        console.log('onComplete:' + total)
        console.log(result)
    }
}

preloader(options);

options 参数描述

| Option | Description | default | type | Function Params Description | | -------------- | ---------------------- | ------- | ------------ | ------------------------ | | resources | 预加载的图片集合 | - | JSON, Array | - | | onStart | 图片开始加载时的回调 | - | Function | total: 预加载的图片总数 | | onProgress | 每一张图片加载完成的回调 | - | Function | currentIndex：已加载的图片数 total：预加载图片总数 | | onComplete | 所有图片加载完成的回调 | - | Function | total: 预加载的图片总数 result: 预加载的图片集合(同resources) |

LICENSE

项目来自 chenyinkai resloader