npm

instant-load

InstantLoad

InstantLoadJS is a JavaScript library to speed up your site.

How does it work?

InstantLoad makes your website a one-page website by preloading the next page on your website when hovering a link. When the user clicks the link, the already loaded page replaces the current one with an instant transition. In addition InstantLoadJS offers seamless loading animations to make your website look even more modern.

Install

CDN:

https://unpkg.com/instant-load@1.1.1/instantload.min.js

NPM:

npm i instant-load

Initialize

Place the InstantLoad script on the bottom of your webpage, before any other scripts, like this:

API

The InstantLoad object returns some useful values. Let's take a look at them!

InstantLoad.init()

This will initialize the InstantLoad script and start speeding up you site

InstantLoad.config()

This will return the current config for the library. You can also use it to change the config, after initializing InstantLoad.

InstantLoad.on('eventType', callback)

Used to add your own events to InstantLoad. More belove

InstantLoad.history

This will return the history of your site, after initializing the library.

InstantLoad.configOptions

This stores the options for different config elements

InstantLoad.isRunning

Check if InstantLoad had been initialized

Blacklisting scripts

If you don't want your scripts to get re-inserted and re-initialized, you will find the instantload-blacklist attribute really useful. Add it to your scripts to blacklist it from InstantLoad, like this:

<script src="/path/to/my/script.js" instantload-blacklist></script>

Event Handling

InstantLoad has it's own events, and you can listen to them like this:

eventType: changepopstateEvent: Whether the change was triggered by the back/forward arrows or not

Occurs after changing the page

Customize the loading styles

You can configure the different loading styles via CSS. You can find the CSS selectors to use above.

Selector

Element

#instantload-bar

The loading line of the bar styled loading

#instantload-whiteScreen

The blink styled loading's layer

#instantload-circle

The circle styled spinner loading's container

#instantload-circle-spinner

The circle styled loading's spinner

Why did I make this library?

I was working on a project of mine, and I wanted to use the well-known instantclick.io library, but I realized, that while it is great and very much useful, it lacks some customizations I'd like to use and it is a bit buggy.