@nfalcone/hover-fetch
v0.3.0
Published
Prefetch links on hover
Readme
@nickFalcone/hover-fetch
A programmatic, cross-browser, zero-dependency way to prefetch links.
Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future... When the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache. — MDN Web Docs
Supported browsers
Install
$ npm install @nfalcone/hover-fetchUse
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script async defer src="app.js" type="module"></script>
</head>
<body>
<h1>hover-fetch</h1>
<ul>
<li><a class="link-to-prefetch" href="https://example.com/">Test 1</a></li>
<li><a href="http://browserify.org/">Test 2</a></li>
<li><a href="https://pi-hole.net/">Test 3</a></li>
</ul>
</body>
</html>// app.js
const hoverFetch = require('@nfalcone/hover-fetch');
const anchor = document.querySelector('.link-to-prefetch');
hoverFetch(anchor); // will initiate a prefetch request when `anchor` is hoveredSee a working demo at https://hoverfetch.com/
Develop
Setup
$ git clone [email protected]:nickFalcone/hover-fetch.git
$ npm install --save-devLocal build/watch
$ npm run dev # serves ./stub on port 8081stub/app.js consumes index.js directly.
stub/index.html embeds stub/bundle.js (the browserify bundled file)
Test
$ npm run test # serves ./stub on port 8080 and runs Jest