https://github.com/SamKnows/futurelink

:crystal_ball: Predicts when a link is about to be clicked
https://github.com/SamKnows/futurelink

Last synced: about 2 months ago
JSON representation

:crystal_ball: Predicts when a link is about to be clicked

• Host: GitHub
• URL: https://github.com/SamKnows/futurelink
• Owner: callumacrae
• Created: 2017-05-15T17:20:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-24T08:22:39.000Z (about 6 years ago)
• Last Synced: 2024-04-14T22:56:43.118Z (5 months ago)
• Language: JavaScript
• Homepage: https://callumacrae.github.io/futurelink/
• Size: 10.7 KB
• Stars: 146
• Watchers: 6
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# futurelink

> Calculates the deceleration of the cursor to predict when a link is about to be clicked.

## Install

```

$ npm install --save futurelink

```

## Usage

```js

var futurelink = require('futurelink');

futurelink({

  links: document.querySelectorAll('a'),

  future: function (link) {

    // `link` is probably going to be clicked soon

    // Preload some images, if you can!

  },

  

  // These also exist, but aren't usually needed:

  hover: function (link) {},

  click: function (link) {}

})

```

Pass it an array or NodeList of elements, and when the cursor is approaching one of those elements, the `future` callback will be fired with the element in question as an argument. `future` will only be called once per element.

The links are read directly from the options object, so if you want to update the links being watched (say, because you want to watch some elements newly added to the DOM), you can do this:

```js

var options = {

  links: document.querySelectorAll('a'),

  future: function (link) {}

};

futurelink(options);

router.afterEach(function () {

  options.links = document.querySelectorAll('a');

});

```

### Disabling for sections of the page / individual links

futurelink won't look at links that have a `no-futurelink` class on them or one of their parent elements. It also only looks at internal links.

```html



  Futurelink won't tell you about this link



It won't tell you about this one either

```

### Removing futurelink from the page

If you want to completely remove futurelink, it returns a `teardown` function that you can call:

```js

var teardown = futurelink(options);

// Later…

teardown();

```

Now the event listeners will be removed and futurelink won't tell you when links are about to be clicked anymore.

## How effective is it

On samknows.com, it speeds up non-initial page loads by an average of 870ms.

## How does it work?

You can see an article about that on the [SamKnows Medium](https://blog.samknows.com/intelligent-page-preloading-with-futurelink-c1de25449dee).

## Usage with frameworks

- [vue-futurelink](https://github.com/SamKnows/vue-futurelink)

## License

Released under the MIT license.