Easy To Use Tool To Detect Website Loading Progress

SiteLoader is a simple and easy-to-use website loading progress detection tool that can help you quickly achieve a real page loading effect. [一个简单易用的网站加载进度检测小工具，可以帮助您快速实现页面的真实加载效果] It monitors photo, video, and audio loading progress, then runs a custom function when all assets are fully loaded. Perfect for any developer looking to perfect the user experience through careful management of load notes.

This library can calculate the total loading progress of all page element resources (image/video/audio) you pass. This progress will vary from 0 to 100. You can use the progress event to make your settings each time the progress changes. A callback function, and you can get the value of the current progress through this callback function.

And when all the resources you set to count are loaded, the corresponding event will be triggered, and you can set the corresponding callback function through this event, so that it is easy to implement some custom code to implement some page behaviors, such as loading hide, page rendering, and so on.

There are two load statistics modes

Overall load – the most frequently used load statistics mode, all resources that need load statistics are loaded together as a whole, and the load order follows the default mechanism of the browser.
Loading in stages All resources that need to be calculated will be divided into multiple stages, and the resources in each stage will be loaded in sequence. For example, after the resources are loaded in the first stage, the resources in the second stage will be loaded. Resources at each stage After the upload is completed, the corresponding event will be triggered, and you can execute your own code in the event.

Must Read: A Lightweight JavaScript Library For Accurate Web Loading Progress | realprogress.js

How to make use of it:

1. Install and import the Siteloader tool.

# NPM
$ npm i siteloader

import SiteLoader from 'siteloader'

<!-- OR -->
<script src="dist/sl.umd.js"></script>

2. Configure SiteLoader and select Images, Video, or Audio to monitor upload progress.

const sl = new SiteLoader(
  [
    {
      sources: [
        {
          sourceType: 'image',
          selectors: ['.selected', '.selected-2']
        },
        {
          sourceType: 'media',
          selectors: ['#video']
        },
        {
          sourceType: 'media',
          selectors: ['#audio']
        }
      ]
    }
  ]
)

3. Separate resources into phases 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')
})