1. resource-loader
A generic asset loader, made with web games in mind.
resource-loader
Package: resource-loader
Created by: englercj
Last modified: Sun, 26 Jun 2022 11:55:15 GMT
Version: 4.0.0-rc4
License: MIT
Downloads: 183,271
Repository: https://github.com/englercj/resource-loader

Install

npm install resource-loader
yarn add resource-loader

Resource Loader Build Status

A generic resource loader, made with web games in mind.

Philosophy

This library was built to make it easier to load and prepare data asynchronously. The
goal was mainly to unify the many different APIs browsers expose for loading data and
smooth the differences between versions and vendors.

It is not a goal of this library to be a resource caching and management system,
just a loader. This library is for the actual mechanism of loading data. All
caching, resource management, knowing what is loaded and what isn't, deciding
what to load, etc, should all exist as logic outside of this library.

As a more concrete statement, your project should have a Resource Manager that
stores resources and manages data lifetime. When it decides something needs to be
loaded from a remote source, only then does it create a loader and load them.

Usage

 // ctor
import { Loader } from 'resource-loader';

const loader = new Loader();

loader
    // Chainable `add` to enqueue a resource
    .add(url)

    // 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).
    .use((resource, next) =>
    {
        // Be sure to call next() when you have completed your middleware work.
        next();
    })

    // The `load` method loads the queue of resources, and calls the passed in callback called once all
    // resources have loaded.
    .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.
    });

// Throughout the process multiple signals can be dispatched.
loader.onStart.add(() => {}); // Called when a resource starts loading.
loader.onError.add(() => {}); // Called when a resource fails to load.
loader.onLoad.add(() => {}); // Called when a resource successfully loads.
loader.onProgress.add(() => {}); // Called when a resource finishes loading (success or fail).
loader.onComplete.add(() => {}); // Called when all resources have finished loading.

Building

You will need to have node setup on your machine.

Then you can install dependencies and build:

 npm i && npm run build

That will output the built distributables to ./dist.

Supported Browsers

  • IE 9+
  • FF 13+
  • Chrome 20+
  • Safari 6+
  • Opera 12.1+

Upgrading to v4

  • Before middleware has been removed, so no more pre function.
    • If you used pre middleware for url parsing, use the new urlResolver property instead.
  • crossOrigin must now be a string if specified.
  • Resource.LOAD_TYPE enum replaced with Load Strategies.
    • For example, loadType: Resource.LOAD_TYPE.IMAGE is now strategy: Loader.ImageLoadStrategy.
  • Resource.XHR_RESPONSE_TYPE enum replaced with XhrLoadStrategy.ResponseType.
    • For example, xhrType: Resource.XHR_RESPONSE_TYPE.DOCUMENT is now xhrType: Loader.XhrLoadStrategy.ResponseType.Document.
  • Overloads for the add function have been simplified.
    • The removed overloads were not widely used. See the docs for what is now valid.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code