Skip to content
preload resource repo.
TypeScript Shell JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
build
examples
src
test
.gitignore
.travis.yml
LICENSE
README.md
commitlint.config.js
logo.png
package.json
tsconfig.json
tslint.json
yarn.lock

README.md





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

You can’t perform that action at this time.