Class: ResourceLoader

Tiny. ResourceLoader

Manages the state and loading of multiple resources to load.

new Tiny.ResourceLoader(baseUrl, concurrency)

Name Type Default Description
baseUrl string '' optional

The base url for all resources loaded by this loader.

concurrency number 10 optional

The number of resources to load concurrently.

Version:
  • 1.2.0
See:

Members

staticTiny.ResourceLoader._defaultAfterMiddlewareArray.<function()>

A default array of middleware to run after loading each resource.
Each of these middlewares are added to any new Loader instances when they are created.

staticTiny.ResourceLoader._defaultBeforeMiddlewareArray.<function()>

A default array of middleware to run before loading each resource.
Each of these middlewares are added to any new Loader instances when they are created.

staticTiny.ResourceLoader.prefunction

Sets up a middleware function that will run before the resource is loaded.

staticTiny.ResourceLoader.usefunction

Sets up a middleware function that will run after the resource is loaded.

_afterMiddlewareArray.<function()>

The middleware to run after loading each resource.

_beforeMiddlewareArray.<function()>

The middleware to run before loading each resource.

_resourcesParsingArray.<Tiny.loaders.Resource>

The tracks the resources we are currently completing parsing for.

baseUrlstring

The base url for all resources loaded by this loader.

concurrencynumber

The number of resources to load concurrently.

Default Value:
  • 10

defaultQueryStringstring

A querystring to append to every URL added to the loader.

This should be a valid query string without the question-mark (?). The loader will also not escape values for you. Make sure to escape your parameters with encodeURIComponent before assigning this property.

Example
const loader = new Tiny.ResourceLoader();

loader.defaultQueryString = 'user=me&password=secret';

// This will request 'image.png?user=me&password=secret'
loader.add('image.png').load();

loader.reset();

// This will request 'image.png?v=1&user=me&password=secret'
loader.add('iamge.png?v=1').load();

loadingboolean

Loading state of the loader, true if it is currently loading resources.

onCompleteSignal

Dispatched when the queued resources all load.

The callback looks like Tiny.ResourceLoader.OnCompleteSignal.

onErrorSignal

Dispatched once per errored resource.

The callback looks like Tiny.ResourceLoader.OnErrorSignal.

onLoadSignal

Dispatched once per loaded resource.

The callback looks like Tiny.ResourceLoader.OnLoadSignal.

onProgressSignal

Dispatched once per loaded or errored resource.

The callback looks like Tiny.ResourceLoader.OnProgressSignal.

onStartSignal

Dispatched when the loader begins to process the queue.

The callback looks like Tiny.ResourceLoader.OnStartSignal.

progressnumber

The progress percent of the loader going through the queue.

resourcesobject.<string, Tiny.loaders.Resource>

All the resources for this loader keyed by name.

Methods

add(name, url, options, cb){Tiny.ResourceLoader}

Adds a resource (or multiple resources) to the loader queue.

This function can take a wide variety of different parameters. The only thing that is always required the url to load. All the following will work:

loader
    // normal param syntax
    .add('key', 'http://...', function () {})
    .add('http://...', function () {})
    .add('http://...')

    // object syntax
    .add({
        name: 'key2',
        url: 'http://...'
    }, function () {})
    .add({
        url: 'http://...'
    }, function () {})
    .add({
        name: 'key3',
        url: 'http://...'
        onComplete: function () {}
    })
    .add({
        url: 'https://...',
        onComplete: function () {},
        crossOrigin: true
    })

    // you can also pass an array of objects or urls or both
    .add([
        { name: 'key4', url: 'http://...', onComplete: function () {} },
        { url: 'http://...', onComplete: function () {} },
        'http://...'
    ])

    // and you can use both params and options
    .add('key', 'http://...', { crossOrigin: true }, function () {})
    .add('http://...', { crossOrigin: true }, function () {});
Name Type Description
name string optional

The name of the resource to load, if not passed the url is used.

url string optional

The url for this resource, relative to the baseUrl of this loader.

options object optional

The options for the load.

Name Type Default Description
crossOrigin string | boolean optional

Is this request cross-origin? Default is to determine automatically.

timeout number 0 optional

A timeout in milliseconds for the load. If the load takes longer than this time it is cancelled and the load is considered a failure. If this value is set to 0 then there is no explicit timeout.

loadType Tiny.loaders.Resource.LOAD_TYPE Tiny.loaders.Resource.LOAD_TYPE.XHR optional

How should this resource be loaded?

xhrType Tiny.loaders.Resource.XHR_RESPONSE_TYPE Tiny.loaders.Resource.XHR_RESPONSE_TYPE.DEFAULT optional

How should the data being loaded be interpreted when using XHR?

metadata object optional

Extra configuration for middleware and the Resource object.

Name Type Default Description
loadElement HTMLImageElement | HTMLAudioElement | HTMLVideoElement null optional

The element to use for loading, instead of creating one.

skipSource boolean false optional

Skips adding source(s) to the load element. This is useful if you want to pass in a loadElement that you already added load sources to.

mimeType string | Array.<string> optional

The mime type to use for the source element of a video/audio elment. If the urls are an array, you can pass this as an array as well where each index is the mime type to use for the corresponding url index.

cb function optional

Function to call when this specific resource completes loading.

Returns:
Type Description
Tiny.ResourceLoader Returns itself.

Starts loading the queued resources.

Name Type Description
cb function optional

Optional callback that will be bound to the complete event.

Returns:
Type Description
Tiny.ResourceLoader Returns itself.

Sets up a middleware function that will run before the resource is loaded.

Name Type Description
fn function

The middleware function to register.

Returns:
Type Description
Tiny.ResourceLoader Returns itself.

Resets the queue of the loader to prepare for a new load.

Returns:
Type Description
Tiny.ResourceLoader Returns itself.

Sets up a middleware function that will run after the resource is loaded.

Name Type Description
fn function

The middleware function to register.

Returns:
Type Description
Tiny.ResourceLoader Returns itself.

Type Definitions

Tiny.ResourceLoader.OnCompleteSignal(loader)

When the loader completes loading resources it dispatches this callback.

Name Type Description
loader Tiny.ResourceLoader

The loader that has finished loading resources.

Tiny.ResourceLoader.OnErrorSignal(loader, resource)

When an error occurrs the loader and resource are disaptched.

Name Type Description
loader Tiny.ResourceLoader

The loader the error happened in.

resource Tiny.loaders.Resource

The resource that caused the error.

Tiny.ResourceLoader.OnLoadSignal(loader, resource)

When a load completes the loader and resource are disaptched.

Name Type Description
loader Tiny.ResourceLoader

The loader that laoded the resource.

resource Tiny.loaders.Resource

The resource that has completed loading.

Tiny.ResourceLoader.OnProgressSignal(loader, resource)

When the progress changes the loader and resource are disaptched.

Name Type Description
loader Tiny.ResourceLoader

The loader the progress is advancing on.

resource Tiny.loaders.Resource

The resource that has completed or failed to cause the progress to advance.

Tiny.ResourceLoader.OnStartSignal(loader)

When the loader starts loading resources it dispatches this callback.

Name Type Description
loader Tiny.ResourceLoader

The loader that has started loading resources.

Documentation generated by JSDoc 3.4.3 on Mon Dec 03 2018 17:48:52 GMT+0800 (CST)