@nfalcone/hover-fetch

0.3.0 • Public • Published

@nickFalcone/hover-fetch

NPM info

Netlify Status

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

link rel prefetch support

Install

$ npm install @nfalcone/hover-fetch

Use

<!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 hovered

See a working demo at https://hoverfetch.com/

Develop

Setup

$ git clone git@github.com:nickFalcone/hover-fetch.git

$ npm install --save-dev

Local build/watch

$ npm run dev # serves ./stub on port 8081

stub/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

Readme

Keywords

none

Package Sidebar

Install

npm i @nfalcone/hover-fetch

Weekly Downloads

0

Version

0.3.0

License

Apache-2.0

Unpacked Size

36.2 kB

Total Files

22

Last publish

Collaborators

  • nfalcone