preload-it

A tiny 1kb JavaScript library for preloading assets on the browser via XHR2. It provides the ability to preload assets of different file types and composite progress events.

Installing

If you use npm, npm i preload-it. Otherwise, download the latest release. The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from unpkg. For example:

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

For the minified version:

<script src="https://unpkg.com/preload-it"></script>

preload-it is written using ES2015 modules. To import preload-it into an ES2015 application, import into a namespace:

<script type="module">
    import preload from 'https://unpkg.com/preload-it@latest/dist/preload-it.esm.min.js';
</script> 

or

import Preload from 'preload-it';
const preload = Preload();

Getting started

const preload = Preload();
 
preload.fetch([
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
]).then(items => {
  // use either a promise or 'oncomplete'
  console.log(items);
});
 
preload.oncomplete = items => {
  console.log(items);
}
 
preload.onprogress = event => {
  console.log(event.progress + '%');
}
 
preload.onfetched = item => {
  console.log(item);
}
 
preload.onerror = item => {
  console.log(item);
}
 

Canceling preload of assets

Preloading of assets can be canceled at any time during fetching, when calling preload.cancel() all assets already preloaded will be available to use, however the download of pending assets will be abandoned, and status will be set to 0 for those remaining items.

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

See a live example

Codepen Preload-it example

License

Released for free under the MIT license, which means you can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a requirement.

MIT.