Preload Specified Assets Using XHR2 – preload-it

The preload-it library preloads & prefetches assets (e.g., videos, audio, etc.) using XMLHttpRequest to optimize your webpage’s loading speed.

Also provides event handlers that will be fired based on the loading status.

How to use it:

Install & import preload-it.

# NPM
$ npm install preload-it --save

import preload from 'preload-it';

Or directly load the library from a CDN.

<script src="https://unpkg.com/preload-it@latest/dist/preload-it.js"></script>

Create a new Preload instance to initialize the library.

const instance = Preload();

Specify an array of resources to prefetch.

instance.fetch([
  '1.mp4',
  '2.mp4',
  '1.jpg'
])

Output the resources that are completely loaded.

instance.fetch([
  '1.mp4',
  '2.mp4',
  '1.jpg'
]).then(items => {
  console.log(items);
});

Or…

instance.oncomplete = items => {
  console.log(items);
}

Output the current loading progress.

instance.onprogress = event => {
  console.log(event.progress + '%');
}

Output the prefetched resources.

instance.onfetched = item => {
  console.log(item);
}

Execute a function when an error occured.

instance.onerror = item => {
  console.log(item);
}

Execute a function on cancel.

instance.oncancel = items => {
  console.log(items);
}

Cancle preloading of assets.

instance.cancel();

Changelog:

v2.0.0 (08/31/2026)

• Added request timeouts, normalized failure metadata, TypeScript declarations, package exports, and dispose() for object-URL cleanup.
• Added an optional concurrency limit while preserving unlimited parallel requests by default.
• Added deterministic browser tests and continuous integration.
• state now contains only the latest batch.
• Overlapping fetch() calls on one instance reject with a usage error.

v1.4.0 (12/02/2019)

• added cancel method and oncancel event

v1.3.1 (12/01/2019)

• added progress computational mode: stepped
• added error handling