Preload Specified Assets Using XHR2 – preload-it

Category: Javascript , Loading , Recommended | October 28, 2018
Author: andreupifarre
Views Total: 245
Official Page: Go to website
Last Update: October 28, 2018
License: MIT

Preview:

Preload Specified Assets Using XHR2 – preload-it

Description:

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

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

How to use it:

Install & Import the 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/[email protected]/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);
}

Leave a Reply