back-loader

a easy and steady preload lib

Usage no npm install needed!

<script type="module">
  import backLoader from 'https://cdn.skypack.dev/back-loader';
</script>

README





back-loader (~ 1.2kb gzipped)

a easy and steady preload lib, you can use it to load all kinds of resources.

use back-loader in your project, you can quickly preload more pictures, styles(.css) or scripts, it will make your website more fluent.

According to my data，use back-loader preload all page in production project, DomReadyTime < 200 ms !!! the user experience of each page can be greatly improved.

Usage

  1. install: npm i back-loader --save

  2. use:

import { BackLoader } from 'back-loader'

const backHandler = new BackLoader({
  pages?: string[],
  scripts?: string[],
  styles?: string[],
  images?: string[],
})

// at the right time:
backHandler.start()
backHandler.onload = (event: loadEvent) => {
  console.log(event)
}

type loadEvent = {
  source: string,           // resource url, like: 'host.com/a.js'
  type: string,             // resource type, like: 'script' / 'style' / 'image'
  success: boolean,
  insertScripts?: Function,
}

For example, i want preload google.com/new-product.html page, then append the above code on the home page (or any other pages), like setTimeout(() => backHandler.start(), 1000), browser will load all resources and caching to memory or disk, waiting for the user to browse google.com/new-product.html，just need few millisecond!


LICENSE

MIT