-
If type of this value is not a function this key will be ignored.
↩
↩
↩
-
This value can be true or 'true' any other values is false.
↩
↩
-
Only first DOM Element, if no DOM elements found or value is invalid it will be ignored.
↩
↩
-
First parameter of the executed function will be the error object, parameters from this array will be added after it.
↩
-
First parameter of the executed function will be the loading percentage (integer number), parameters from this array will be added after it.
Last parameter — speed object with value, units and bytesSpeed keys.
↩
-
All DOM Elements selected with this selector will get updates of progress attribute during loading. It's also can be outside preloader or/and event target.
↩
-
All progress DOM Elements with this attribute wil get inner text updates during loading.
↩
---
## Events
All plugin events have event.detail.loaded and event.detail.failed properties, types is number.
#### preloadend
``` javascript
document.addEventListener('preloadend', e => {
console.log('total loaded =' + e.detail.loaded);
console.log('total fails =' + e.detail.failed);
});
```
#### preloaderror
Error event have event.detail.error property, which contains last Error object.
``` javascript
document.addEventListener('preloaderror', e => {
console.log(e.detail.error);
});
```
#### preloadprogress
Progress event contains percentage value of loaded files and current speed values
``` javascript
document.addEventListener('preloadprogress', e => {
console.log(`Loaded ${e.detail.value}%`);
console.log(`Preload speed is ${e.detail.speed.bytesSpeed} bytes/second`);
console.log(`Preload speed is ${e.detail.speed.value} ${e.detail.speed.units}`);
});
```
---
## Methods and Properties
Start preloader
``` javascript
preloader.preload();
```
---
Triggering custom event on target with additional details
Acceptable properties eventName type is string, details type is object
``` javascript
const
eventName = 'customEvent',
details = {
number:1
};
preloader.triggerEvent(eventName, details);
```
---
Hiding DOM element stored in preloader.
``` javascript
preloader.hidePreloader();
```
---
Show DOM element stored in preloader if it was hidden with 'hidePreloader()'.
``` javascript
preloader.showPreloader();
```
---
Update progress elements stored in progress.
``` javascript
preloader.updateProgress();
```
### Getters and setters
Set and get options parameters.
*See [options](#options) section for details.*
``` javascript
const defaultOptions = preloader.defaultOptions; //Get options object used by default
preloader.files = ['path/to/file1.ext', 'path/to/file2.ext'];
const filesList = preloader.files;
preloader.preloader = '#preloaderSelector';
const preloaderElement = preloader.preloader; //Get DOM element even if selector string stored to options
preloader.progress = '#progressSelector';
const progressElement = preloader.progress; //Get DOM element even if selector string stored to options
preloader.writePercentsAttr = 'attribute';
const progressAttrTxt = preloader.writePercentsAttr;
preloader.styleVar = '--variable-name';
const styleVar = preloader.styleVar;
preloader.speedTimeout = '250';
const speedTimeout = preloader.speedTimeout; //Get number value even if string is stored to options, if value is invalid returns default value
```
``` javascript
// main callback
preloader.cbParams = [1, 'a'];
const cbParams = preloader.cbParams;
preloader.callback = (a, b) => {
console.log(a); //expected output – 1
console.log(b); //expected output – 'a'
};
const callback = preloader.callback;
```
``` javascript
//error callback
preloader.ifErrorParams = [1, 'a'];
const ifErrorParams = preloader.ifErrorParams;
preloader.ifError = (error, a, b) => {
console.log(error); //expected output – Error object
console.log(a); //expected output – 1
console.log(b); //expected output – 'a'
};
const ifError = preloader.ifError;
```
``` javascript
//percents changing callback
preloader.onProgressParams = [1, 'a'];
const onProgressParams = preloader.onProgressParams;
preloader.onProgress = (progress, a, b) => {
console.log(progress); //expected output – integer number from 0 to 100
console.log(a); //expected output – 1
console.log(b); //expected output – 'a'
};
const onProgress = preloader.onProgress;
```
### Properties
preloader.error - Last error object
preloader.fileSizes - Array of sile sizes and loaded status
preloader.loaded - Number of successfully loaded files
preloader.noAccess - Number of loading failed files
preloader.options - Object contains current options
preloader.percents - Number from 0 to 100 loaded progress
## Without bundler usage
If you want to use it as separate file without any bundler you need to copy 'SimpleResourcePreloader.js' or 'SimpleResourcePreloader.min.js' to your project folder and add type="module" attribute to your script file.
**Be careful [some browsers](https://caniuse.com/es6-module-dynamic-import) still can't import files, so you still need a bundler or transpiler to support those browsers or use [ES5 version](#es5-usage).**
``` html
```
To import it you can use code like this in you script
``` javascript
import SRPreloader from './lib/SimpleResourcePreloader.min.js';
```
To init preloader you need to create new object
``` javascript
const preloader = new SRPreloader({
files: ['./video/intro.mp4', './video/background.mp4']
});
```
to execute preloader you need to run .preload() method
``` javascript
preloader.preload();
```
Go back to [options section](#options)
---
## ES5 Usage
You need to connect plugin script 'SimpleResourcePreloader.es5.js' or 'SimpleResourcePreloader.es5.min.js' before your main script
``` html
```
To init preloader you need to create new object
``` javascript
var preloader = new SimpleResourcePreloader({
files: ['./video/intro.mp4', './video/background.mp4']
});
```
to execute preloader you need to run .preload() method
``` javascript
preloader.preload();
```
Go back to [options section](#options)
---
## License
[MIT](LICENSE)
---
_Source: https://npm.io/package/simple-resource-preloader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._