@nfalcone/hover-fetch NPM

@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

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

@infinitebrahmanuniverse/nolb-_nf @everything-registry/sub-chunk-646 @zalastax/nolb-_nf

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago