Author: | Yinglinhan |
---|---|
Views Total: | 140 views |
Official Page: | Go to website |
Last Update: | May 26, 2023 |
License: | MIT |
Preview:

Description:
An easy-to-use JavaScript library designed to provide real-time, precise loading progress detection for web pages.
It monitors the loading progress of images, video, and audio, then triggers a custom function when all assets are completely loaded. Ideal for any developer looking to master the user experience through fine-grained management of loading feedback.
How to use it:
1. Install and import the Siteloader.
# NPM $ npm i siteloader
import SiteLoader from 'siteloader'
<!-- OR --> <script src="dist/sl.umd.js"></script>
2. Initialize the SiteLoader and select images, video, or audio to monitor loading progress.
const sl = new SiteLoader( [ { sources: [ { sourceType: 'image', selectors: ['.selected', '.selected-2'] }, { sourceType: 'media', selectors: ['#video'] }, { sourceType: 'media', selectors: ['#audio'] } ] } ] )
3. Separate resources into stages to sequence loading and trigger events.
const sl = new SiteLoader( [ // stage1 { stageName: 'stage1', sources: [{ sourceType: 'image', selectors: ['.selected'] }] }, // stage2 { stageName: 'stage2', sources: [ { sourceType: 'media', selectors: ['#audio'] }, { sourceType: 'media', selectors: ['#video'] } ] } ] )
4. Activate the side loader.
sl.startLoad()
5. Event handlers.
sl.addEventListener('progress', (e) => { console.log(e.progress, '...') }) sl.addEventListener('stage1', () => { console.log('Stage 1 has been loaded') }) sl.addEventListener('countComplete', () => { console.log('end of count') }) sl.addEventListener('trueLoadFinish', () => { console.log('All assets are loaded') })
Changelog:
05/26/2023
- Bugfix