1 | # preload-it
|
2 |
|
3 | A tiny 1kb JavaScript library for preloading assets on the browser via XHR2.
|
4 | It provides the ability to preload assets of different file types and composite progress events.
|
5 |
|
6 | ## Installing
|
7 |
|
8 | If you use npm, `npm i preload-it`. Otherwise, download the [latest release](https://github.com/andreupifarre/preload-it/releases/latest). The released bundle supports anonymous AMD, CommonJS, and vanilla environments. You can load directly from [unpkg](https://unpkg.com/preload-it/). For example:
|
9 |
|
10 | ```html
|
11 | <script src="https://unpkg.com/preload-it@latest/dist/preload-it.js"></script>
|
12 | ```
|
13 |
|
14 | For the minified version:
|
15 |
|
16 | ```html
|
17 | <script src="https://unpkg.com/preload-it"></script>
|
18 | ```
|
19 |
|
20 | preload-it is written using [ES2015 modules](http://www.2ality.com/2014/09/es6-modules-final.html). To import preload-it into an ES2015 application, import into a namespace:
|
21 |
|
22 | ```html
|
23 | <script type="module">
|
24 | import preload from 'https://unpkg.com/preload-it@latest/dist/preload-it.esm.min.js';
|
25 | </script>
|
26 | ```
|
27 | or
|
28 |
|
29 | ```js
|
30 | import Preload from 'preload-it';
|
31 | const preload = Preload();
|
32 | ```
|
33 |
|
34 | ## Getting started
|
35 |
|
36 | ```js
|
37 | const preload = Preload();
|
38 |
|
39 | preload.fetch([
|
40 | 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
|
41 | 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
|
42 | 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
|
43 | ]).then(items => {
|
44 | // use either a promise or 'oncomplete'
|
45 | console.log(items);
|
46 | });
|
47 |
|
48 | preload.oncomplete = items => {
|
49 | console.log(items);
|
50 | }
|
51 |
|
52 | preload.onprogress = event => {
|
53 | console.log(event.progress + '%');
|
54 | }
|
55 |
|
56 | preload.onfetched = item => {
|
57 | console.log(item);
|
58 | }
|
59 |
|
60 | preload.onerror = item => {
|
61 | console.log(item);
|
62 | }
|
63 |
|
64 | ```
|
65 |
|
66 | ## Canceling preload of assets
|
67 |
|
68 | 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.
|
69 |
|
70 | ```js
|
71 | preload.cancel()
|
72 |
|
73 | preload.oncancel = items => {
|
74 | console.log(items);
|
75 | }
|
76 | ```
|
77 |
|
78 |
|
79 | [See a live example](https://andreupifarre.github.io/preload-it/docs/index.html)
|
80 |
|
81 | [Codepen Preload-it example](https://codepen.io/andreupifarre/pen/RedPEQ/)
|
82 |
|
83 | ## License
|
84 |
|
85 | 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.
|
86 |
|
87 | [MIT](LICENSE).
|