PixiJS

Class: Loader

PIXI.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.

new PIXI.Loader (baseUrl, concurrency)

Loader.ts:229
Name Type Description
baseUrl

The base url for all resources loaded by this loader.
concurrency

The number of resources to load concurrently.

Members

PIXI.Loader.shared static

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

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 string

The base url for all resources loaded by this loader.

concurrency number

The number of resources to load concurrently.

Default Value:
  • 10

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.

Default Value:
  • ''
Example

 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 boolean

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

Default Value:
  • false

onComplete PIXI.Signal

Dispatched when the queued resources all load.

onError PIXI.Signal

Dispatched once per errored resource.

onLoad PIXI.Signal

Dispatched once per loaded resource.

onProgress PIXI.Signal

Dispatched once per loaded or errored resource.

onStart PIXI.Signal

Dispatched when the loader begins to process the queue.

progress number

The progress percent of the loader going through the queue.

Default Value:
  • 0

resources object<string, PIXI.LoaderResource>

All the resources for this loader keyed by name.

Methods

PIXI.Loader.registerPlugin (plugin) typeof PIXI.Loader static

Loader.ts:703

Adds a Loader plugin for the global shared loader and all new Loader instances created.

Name Type Description
plugin ILoaderPlugin

The plugin to add
Returns:
Type Description
typeof PIXI.Loader Reference to PIXI.Loader for chaining

destroy () void

Loader.ts:675

Destroy the loader, removes references.

load (cb) this

Loader.ts:450

Starts loading the queued resources.

Name Type Attributes Description
cb Loader.OnCompleteSignal <optional>

Optional callback that will be bound to the complete event.
Returns:
Type Description
this Returns itself.

pre (fn) this

Loader.ts:388

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

Name Type Description
fn ILoaderMiddleware

The middleware function to register.
Returns:
Type Description
this Returns itself.

reset () this

Loader.ts:416

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

Returns:
Type Description
this Returns itself.

use (fn) this

Loader.ts:402

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

Name Type Description
fn ILoaderMiddleware

The middleware function to register.
Returns:
Type Description
this Returns itself.