Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hyvor/flashload
FlashLoad makes navigation between pages faster by preloading content on mouseover event.
https://github.com/hyvor/flashload
Last synced: 27 days ago
JSON representation
FlashLoad makes navigation between pages faster by preloading content on mouseover event.
- Host: GitHub
- URL: https://github.com/hyvor/flashload
- Owner: hyvor
- License: mit
- Created: 2021-12-25T14:52:04.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-13T16:33:48.000Z (11 months ago)
- Last Synced: 2024-10-28T17:13:07.796Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 107 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flashload
Flashload does two things:
1. Starts pre-fetching (pre-loading) the content when the cursor is moved over a link - `mouseover` (on desktop) or `touchstart` (on mobile) events
2. When clicked, it replaces just the `` from the pre-fetched content, and updates the URL using `history.pushState`
This idea is heavily inspired by [InstantClick](http://instantclick.io). This library eliminates the delay between hovering and clicking. You can use [this tool](http://instantclick.io/click-test) 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](https://blogs.hyvor.com). Try navigating through our [blog](https://blogs.hyvor.com/blog) for a live experience.
## Installation
The best way is to copy the following code to the bottom of your HTML pages.
```
FlashLoad.start()
```
## 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 `` of the HTML document. The `` 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 `` is replaced, you have to add your stylesheets and/or scripts to the `` 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 `` tag is enough to make browser title work.
What about other meta tags in ``? 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 element
if (linkElement.pathname.match(/^\/app.*/))
return true;
return false;
}
```
### Events
Flashload triggers 4 events.
1. `flashload:preloadStarted`
User hovered on a preloadable link. Preloading started
2. `flashload:preloadEnded`
Preloading successful
3. `flashload:navigationStarted`
User clicked on a link. Navigation started.
4. `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.
```
### Preventing Re-running Scripts
Use the `data-flashload-skip-script` attribute to prevent re-running a script between page navigations.
```
```
`data-flashload-skip-script` attribute can only be used in `` 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.