Flashload NPM | npm.io

Flashload

Flashload does two things:

Starts pre-fetching (pre-loading) the content when the cursor is moved over a link - mouseover (on desktop) or touchstart (on mobile) events
When clicked, it replaces just the <body> from the pre-fetched content, and updates the URL using history.pushState

This idea is heavily inspired by InstantClick. This library eliminates the delay between hovering and clicking. You can use this tool to understand there is usually a huge delay between hovering and clicking.

This is a perfect solution for small multi-page websites where you have a shared stylesheet. We use this at production for all blogs in Hyvor Blogs. Try navigating through our blog for a live experience.

Installation

The best way is to copy the following code to the bottom of your HTML pages.

<script src="flashload.js"></script>
<script data-flashload-skip-script>
    FlashLoad.start()
</script>

How Flashload Works

When you add Flashload to your website, it adds two event listeners to the document element

mouseoever (or touchstart for mobile): When a user hovers over a link, Flashload starts "pre-fetching" that page and saves it in javascript memory.
click event: When a user clicks on a link, Flashload uses event.preventDefault() to stop browser from loading the page by itself. Instead, Flashload handles this action using history.pushState() (just like a single page app). As the page is already pre-fetched, Flashload simply swaps content, which is super fast than a browser load. However, it is important to know that Flashload only replaces the <body> of the HTML document. The <head> part remains same across pages.

Designing a website for FlashLload

Flashload is best for landing pages, blogs, and other small website, where you can share a single theme (styles).

As only the <body> is replaced, you have to add your stylesheets and/or scripts to the <head> and they should be "common" for all pages on your website, where you wish Flashload to handle navigation.

Flashload updates document.title too, making sure that each HTML page has a correct <title> tag is enough to make browser title work.

What about other meta tags in <head>? Flashload does not update other meta tags (SEO, Social Media) when the user navigates, simply because it is unnecessary. Crawlers (such as search engine robots) "fetch" pages as HTML by sending HTTP requests. They do not "navigate" between pages clicking links. Therefore, Flashload does not change how robots see pages. Simply saying, Flashload has nothing to do with robots. It is only about real user experience.

Config

You can define configuration in an object in the FlashLoad.start() function.

(The following are the defaults)

FlashLoad.start({
    bar: false,
    barDelay: 2000
    basePath: "",
    exclude: undefined,
})

bar - to enable the progress bar
barDelay - delay to start showing the progress bar
basePath - Only match URLs starting with this basepath. Do not add the domain, just the path (FlashLoad only works on a single domain). For example, if only paths that start with /blog should be preloaded, add basepath: "blog". Don't worry about leading and trailing slashes!

exclude - A function to conditionally exclude URLs.

exclude: function(linkElement) {
    // linkElement - the clicked/hovered <a> element
    if (linkElement.pathname.match(/^\/app.*/))
        return true;
    return false;
}

Events

Flashload triggers 4 events.

flashload:preloadStarted User hovered on a preloadable link. Preloading started
flashload:preloadEnded Preloading successful
flashload:navigationStarted User clicked on a link. Navigation started.
flashload:navigationEnded New page displayed (URL, title, and body updated).

Prevent Preloading

You can use the data-flashload-skip-preloading attribute to prevent preloading a link. This can be added to a link directly of to a parent element.

<a data-flashload-skip-preloading></a>
<div data-flashload-skip-preloading></div>

Preventing Re-running Scripts

Use the data-flashload-skip-script attribute to prevent re-running a script between page navigations.

<script data-flashload-skip-script></script>

data-flashload-skip-script attribute can only be used in <script> elements. When used, that script will only be executed on the first load. For example, the <script> element that wraps the FlashLoad() initial function has this attribute. It is because, FlashLoad.start() sets event listeners on the document element, and these events should only be added once.

Under the hood, FlashLoad fetches HTML pages via AJAX and replaces the content of the body. However, browsers do not run any Javascript in the new body content. Therefore, FlashLoad manually runs them, and if there is a data-flashload-skip-script attribute, that script will be skipped.

@everything-registry/sub-chunk-1679 @zalastax/nolb-flas

11 months ago

11 months ago

2 years ago

2 years ago

2 years ago