async-preloader

async-preloader

Assets preloader using ES2017 async/await and fetch.

Install

$ npm install --save async-preloader

API

LoadItem

interface LoadItem {
  id?: string;
  src: string;
  loader?: string;
}

Key	Description
id	Optional id to retrieve the file using AsyncPreloader.items.get(id)
src	Input for the Fetch API
loader	Optional string from one of the LOADERS Map. It needs to be specified for Font and Audio (webm

AsyncPreloader.loadItems(items: LoadItem[])

Arguments

items (Array): Array of LoadItems

Returns

(Promise): A Promise that resolves with the loaded items.

Example

import AsyncPreloader from "async-preloader";

const pItems = AsyncPreloader.loadItems([
  { "id": "myDefaultFile", "src": "assets/default"   },
  { "id": "myTextFile",    "src": "assets/text.txt"  },
  { "id": "myJsonFile",    "src": "assets/json.json" },
  { "id": "myImageFile",   "src": "assets/image.jpg" },
  { "id": "myVideoFile",   "src": "assets/video.mp4" },
  { "id": "myAudioFile",   "src": "assets/audio.mp3" },
  { "id": "myXmlFile",     "src": "assets/xml.xml"   },
  { "id": "mySvgFile",     "src": "assets/xml.svg"   },
  { "id": "myHtmlFile",    "src": "assets/xml.html"  },
  { "id": "myFont",        "src": "Open Sans Regular", "loader": "Font" }
]);

pItems
  .then(items => {
    const element = AsyncPreloader.items.get("myVideoFile");
    document.body.appendChild(element);
  })
  .catch(error => console.error("Error loading items", error));

---

Note: Font loader is using FontFaceObserver

AsyncPreloader.loadManifest(src: string)

You can also load a manifest file. It works in a similar fashion as createjs's PreloadJS.

Arguments

src (String): Input for the Fetch API. It will load the file using the JsonLoader and look for an "items" key containing an array of LoadItems.

Returns

(Promise): A Promise that resolves with the loaded items.

Example

import AsyncPreloader from "async-preloader";

const pItems = AsyncPreloader.loadItems('assets/manifest.json');

pItems
  .then(items => useLoadedItemsFromManifest(items)) // or AsyncPreloader.items.get(pathOrId)
  .catch(error => console.error("Error loading items", error));

AsyncPreloader.loadJson(item: LoadItem)

It is also possible to use the LOADERS individually.

Arguments

item (LoadItem): a LoadItem.

Returns

(Promise): A Promise that resolves with the loaded item.

Example

import AsyncPreloader from "async-preloader";

const pItem = AsyncPreloader.loadJson('assets/json.json');

pItem
  .then(item => useLoadedItemFromManifest(item))
  .catch(error => console.error("Error loading item", error));

License

MIT © Damien Seguin