Flashload does two things:
- Starts pre-fetching (pre-loading) the content when the cursor is moved over a link -
mouseover(on desktop) ortouchstart(on mobile) events - When clicked, it replaces just the
<body>from the pre-fetched content, and updates the URL usinghistory.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.
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>
When you add Flashload to your website, it adds two event listeners to the document element
mouseoever(ortouchstartfor mobile): When a user hovers over a link, Flashload starts "pre-fetching" that page and saves it in javascript memory.clickevent: When a user clicks on a link, Flashload usesevent.preventDefault()to stop browser from loading the page by itself. Instead, Flashload handles this action usinghistory.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.
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.
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
/blogshould be preloaded, addbasepath: "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; }
Flashload triggers 4 events.
flashload:preloadStartedUser hovered on a preloadable link. Preloading startedflashload:preloadEndedPreloading successfulflashload:navigationStartedUser clicked on a link. Navigation started.flashload:navigationEndedNew page displayed (URL, title, and body updated).
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>
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-scriptattribute, that script will be skipped.