ResourceManager

A class for better loading and managing resources.

Demo

Usage

npm install res-manager --save

IResourceEntry

This interface is used for describing a resource.

interface IResourceEntry {
  // a switch for preloading
  preload: boolean;
  // name of this resource
  name: string;
  // url of this resource
  src: string;
  // type of this resource
  type: 'image' | 'video' | 'audio';
  // weight of this resource
  weight: number;
}

ResourceManager

Main class for managing resources.

Method	Type	Description
constructor	() => ResourceManager	Constructor function.
registerOnProgress	(onProgress: (progress: number, string: string) => ResourceManager) => void	Register an callback for progress.
registerOnError	onError: (error: Error, current: string) => ResourceManager) => ResourceManager	Register an callback for error.
registerOnComplete	onComplete: () => ResourceManager) => ResourceManager	Register an callback for completing.
init	(list: IResourceEntry[], timeout?: number) => ResourceManager	Initialize manager by new resources and timeout.
load	(onProgress?: (progress: number, string: string) => void, onComplete?: () => void, onError?: (error: Error, current: string) => void) => ResourceManager	Trigger loading, you can register callbacks here.
getSrc	(name: string) => string	Get source by name.
reset	() => ResourceManager	Reset all options and state.

Accessors	Type	Description
progress	number	Progress of loading.
loadDone	boolean	If the loading was done.

import {IResourceEntry}, ResourceManager from 'res-manager';

const resourceManager = new ResourceManager();
const resources: IResourceEntry = [
  {
    preload: true,
    name: 'H光大小姐',
    src: 'http://oekm6wrcq.bkt.clouddn.com/hh.png',
    type: 'image',
    weight: 1
  },
  {
    preload: true,
    name: '秦皇岛',
    src: 'http://oekm6wrcq.bkt.clouddn.com/秦皇岛.mp3',
    type: 'audio',
    weight: 1
  },
  {
    preload: true,
    name: 'bml2017',
    src: 'http://oekm6wrcq.bkt.clouddn.com/bml-h5.mp4',
    type: 'video',
    weight: 1
  }
];

// prepare hook functions
const onComplete = () => console.log('onComplete')
const onError = (err) => console.error('onError', err)
const onProgress = (progress) => console.info('onProgess', progress)

resourceManager.registerOnComplete(onComplete);
resourceManager.registerOnError(onError);
resourceManager.registerOnProgress(onProgress);

resourceManager.init(resources, 8000);

const imgSrc = resourceManager.getSrc('H光大小姐');

Contribute

Development

Run:

npm run dev

then open localhost:4444.

Build

Run:

npm run build

dtysky/ResourceManager

ResourceManager

Demo

Usage

IResourceEntry

ResourceManager

Contribute

Development

Build

License