Detect and Display Website Loading Progress – Siteloader

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