PIXI.Loader

class Loader

The new loader, forked from Resource Loader by Chad Engler: https://github.com/englercj/resource-loader

const loader = PIXI.Loader.shared; // PixiJS exposes a premade instance for you to use.
// or
const loader = new PIXI.Loader(); // You can also create your own if you want

const sprites = {};

// Chainable `add` to enqueue a resource
loader.add('bunny', 'data/bunny.png')
      .add('spaceship', 'assets/spritesheet.json');
loader.add('scoreFont', 'assets/score.fnt');

// Chainable `pre` to add a middleware that runs for each resource, *before* loading that resource.
// This is useful to implement custom caching modules (using filesystem, indexeddb, memory, etc).
loader.pre(cachingMiddleware);

// Chainable `use` to add a middleware that runs for each resource, *after* loading that resource.
// This is useful to implement custom parsing modules (like spritesheet parsers, spine parser, etc).
loader.use(parsingMiddleware);

// The `load` method loads the queue of resources, and calls the passed in callback called once all
// resources have loaded.
loader.load((loader, resources) => {
    // resources is an object where the key is the name of the resource loaded and the value is the resource object.
    // They have a couple default properties:
    // - `url`: The URL that the resource was loaded from
    // - `error`: The error that happened when trying to load (if any)
    // - `data`: The raw data that was loaded
    // also may contain other properties based on the middleware that runs.
    sprites.bunny = new PIXI.TilingSprite(resources.bunny.texture);
    sprites.spaceship = new PIXI.TilingSprite(resources.spaceship.texture);
    sprites.scoreFont = new PIXI.TilingSprite(resources.scoreFont.texture);
});

// throughout the process multiple signals can be dispatched.
loader.onProgress.add(() => {}); // called once per loaded/errored file
loader.onError.add(() => {}); // called once per errored file
loader.onLoad.add(() => {}); // called once per loaded file
loader.onComplete.add(() => {}); // called once when the queued resources all load.

Constructor


new PIXI.Loader(baseUrl: string, concurrency: number) → {}
Parameters:
Name Type Default Description
baseUrl string ''

The base url for all resources loaded by this loader.

concurrency number 10

The number of resources to load concurrently.

Summary


Properties from Loader

PIXI.Loader
static shared

A premade instance of the loader that can be used to load resources.

ILoaderAdd
add

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

string
baseUrl

The base url for all resources loaded by this loader.

number
concurrency = 10
string
defaultQueryString = ""

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

boolean
loading = false

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

PIXI.Signal<Loader.OnCompleteSignal>
onComplete

Dispatched when the queued resources all load.

PIXI.Signal<Loader.OnErrorSignal>
onError

Dispatched once per errored resource.

PIXI.Signal<Loader.OnLoadSignal>
onLoad

Dispatched once per loaded resource.

PIXI.Signal<Loader.OnProgressSignal>
onProgress

Dispatched once per loaded or errored resource.

PIXI.Signal<Loader.OnStartSignal>
onStart

Dispatched when the loader begins to process the queue.

number
progress = 0

The progress percent of the loader going through the queue.

Dict<PIXI.LoaderResource>
resources

All the resources for this loader keyed by name.

Public Properties


shared Loader.ts:615
static shared: PIXI.Loader

A premade instance of the loader that can be used to load resources.

add Loader.ts:211
add: ILoaderAdd

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 () {});
baseUrl Loader.ts:105
baseUrl: string

The base url for all resources loaded by this loader.

concurrency Loader.ts:435
concurrency: number = 10

The number of resources to load concurrently.

defaultQueryString Loader.ts:114
defaultQueryString: string = ""

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.


 const loader = new Loader();

 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();
loading Loader.ts:111
loading: boolean = false

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

onComplete Loader.ts:169
onComplete: PIXI.Signal<Loader.OnCompleteSignal>

Dispatched when the queued resources all load.

onError Loader.ts:160
onError: PIXI.Signal<Loader.OnErrorSignal>

Dispatched once per errored resource.

onLoad Loader.ts:163
onLoad: PIXI.Signal<Loader.OnLoadSignal>

Dispatched once per loaded resource.

onProgress Loader.ts:157
onProgress: PIXI.Signal<Loader.OnProgressSignal>

Dispatched once per loaded or errored resource.

onStart Loader.ts:166
onStart: PIXI.Signal<Loader.OnStartSignal>

Dispatched when the loader begins to process the queue.

progress Loader.ts:108
progress: number = 0

The progress percent of the loader going through the queue.

resources Loader.ts:154
resources: Dict<PIXI.LoaderResource>

All the resources for this loader keyed by name.

Public Methods


registerPlugin Loader.ts:630
static registerPlugin(plugin: ILoaderPlugin) → {typeof PIXI.Loader}
Deprecated: since 6.5.0

Use the PIXI.extensions.add API to register plugins.

Parameters:
Name Type Description
plugin ILoaderPlugin

The plugin to add

Returns:
Type Description
typeof PIXI.Loader

Reference to PIXI.Loader for chaining

destroy Loader.ts:606
destroy() → {void}

Destroy the loader, removes references.

Returns:
Type Description
void
load Loader.ts:386
load(cb: Loader.OnCompleteSignal) → {this}

Starts loading the queued resources.

Parameters:
Name Type Attributes Description
cb Loader.OnCompleteSignal

<optional>

Optional callback that will be bound to the complete event.

Returns:
Type Description
this

The loader itself.

pre Loader.ts:327
pre(fn: ILoaderMiddleware) → {this}

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

Parameters:
Name Type Description
fn ILoaderMiddleware

The middleware function to register.

Returns:
Type Description
this

The loader itself.

reset Loader.ts:353
reset() → {this}

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

Returns:
Type Description
this

The loader itself.

use Loader.ts:340
use(fn: ILoaderMiddleware) → {this}

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

Parameters:
Name Type Description
fn ILoaderMiddleware

The middleware function to register.

Returns:
Type Description
this

The loader itself.


Powered by webdoc!