@barba/prefetch

Barba prefetches automatically and cache your pages.

It is mainly inspired by quicklink.

How it works?

Based on Intersection Observer, it processes all eligible links that enter the viewport. Depending on your browser, you may need a polyfill to properly use this plugin.

You can use this feature regardless of the prefetchIgnore core property. Since the links will be prefetched depending on the viewport, it will prevent the core prefetch process from prefetching a link on enter.

1
2
3
4
5
6
7
8

import barba from '@barba/core';
import barbaPrefetch from '@barba/prefetch';

// tell Barba to use the prefetch plugin
barba.use(barbaPrefetch);

// init Barba
barba.init();

On slow network or with a high page weight, the server can take time to prefetch the response and can lead Barba to abort the transition and display a Timeout error message.

See the timeout setting to properly manage this behavior.

Options

root

The HTMLElement or HTMLDocument to wrap, by default it uses the document.body.

You can pass a custom element to prevent the plugin from prefetching all links from the entire wrapper. You can also apply a custom limit to only prefetch the 4th first link of the root element.

timeout

Delay before internal requestIdleCallback call is canceled, in milliseconds.

See https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback#parameters.

limit

Number limit of links to be prefetched.

Zero mean “no limit”: the plugin will prefetch all eligible links of the root element.

Here is an example with all options passed to the plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import barba from '@barba/core';
import barbaPrefetch from '@barba/prefetch';

// get the wrapper
const wrapper = document.querySelector('.prefetch-wrapper');

// tell Barba to use the prefetch plugin
barba.use(barbaPrefetch, {
  root: wrapper,
  timeout: 2500,
  limit: 0
});

// init Barba
barba.init();