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