https://github.com/lotusk08/instantview
Make the website faster by preloading pages on hover
https://github.com/lotusk08/instantview
hover-effects instantclick instantview javascript preloading
Last synced: 4 months ago
JSON representation
Make the website faster by preloading pages on hover
- Host: GitHub
- URL: https://github.com/lotusk08/instantview
- Owner: lotusk08
- License: mit
- Created: 2025-05-04T13:42:42.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-05-06T05:11:52.000Z (9 months ago)
- Last Synced: 2025-05-19T02:11:49.898Z (9 months ago)
- Topics: hover-effects, instantclick, instantview, javascript, preloading
- Language: JavaScript
- Homepage: https://dev.lotusk08-github-io.pages.dev/
- Size: 32.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Instantview
Make the website faster by preloading pages on hover
This is a mini script like instantclick, but well-structured version:
- Script Sandboxing System
- Improved Script Registry
- Controlled Script Execution
- Script Context Management
- Global Variable Preservation
- Better Error Handling
- Script Dependency Management
## Core functionality remains:
- [x] Link prefetching on hover/mousedown
- [x] Fast page transitions
- [x] History state management
- [x] Script handling during transitions
- [ ] Enhance with new perf like DOM-Less feature & rewrite in ES6 *- I think for myself*
## How to use InstantView
To use this library on your website:
1. Include the JavaScript file in your HTML(header/footer):
```html
```
2. Initialize it when the DOM is ready (HTML in header/footer):
```html
document.addEventListener("DOMContentLoaded", function() {
InstantView.init();
});
```
3. Optional: Add configuration options
```html
document.addEventListener("DOMContentLoaded", function() {
// Use mousedown instead of mouseover (faster perceived speed but less preloading)
InstantView.init("mousedown");
// Add a delay in milliseconds before preloading (reduce unnecessary requests)
InstantView.init(100);
// Use whitelist mode (only preload links with data-instant attribute)
InstantView.init(true);
// Combine options
InstantView.init(true, "mousedown", 50);
});
```
4. Optional: Listen for events
```html
InstantView.on("change", function() {
// Page has changed
setupAnalytics();
});
InstantView.on("fetch", function() {
// Page fetch started
showCustomLoadingIndicator();
});
```
## Demo
_I tested in my site_
Link: https://dev.lotusk08-github-io.pages.dev/
## Issue?
Read the [WIKI](https://github.com/lotusk08/instantview.wiki.git)
## Source
Thank to [InstantClick](http://instantclick.io) & [EGOIST](https://github.com/egoist/instantclick) libraries.
## License
[MIT](/LICENSE) © [stevehoang.com](https://stevehoang.com).