---
name: "[up-preload]"
area: "API"
kind: "HTML attribute"
parent: "up.link module"
url: "https://unpoly.com/api/up-preload"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.link module](https://unpoly.com/api/up.link.md)</nav>

# [up-preload]

[Preloads](https://unpoly.com/learn/preloading.md) this link before the user clicks it. When the link is clicked, the response will already be [cached](https://unpoly.com/learn/caching.md), making the interaction feel instant.

Unpoly will only preload [links with safe methods](https://unpoly.com/api/up.link.isSafe.md). The `[up-preload]` attribute has no effect on unsafe links.

Links with an `[up-preload]` attribute are always [followed by Unpoly](https://unpoly.com/api/up-follow.md) and will not make a full page load.

<nav aria-label="Guides">

- [Learn: Preloading links](https://unpoly.com/learn/preloading.md)

</nav>

## Example {#example}

```html
<a href="/path" up-preload>Hover over me to preload my content</a>
```

---

## Modifying attributes {#attributes}

> #### Info
>
> All modifying attributes for [`[up-follow]`](https://unpoly.com/api/up-follow.md) may also be used.

### Timing {#attributes-timing}

#### [up-preload='hover'] {#up-preload}

(optional)

When to preload this link.

When set to `'hover'` (the default), preloading will start when the user hovers over this link [for a while](#up-preload-delay). On touch devices, preloading will begin when the user places their finger on the link. Also see [preloading on hover](https://unpoly.com/learn/preloading.md#on-hover).

When set to `'insert'`, preloading will start immediately when this link is inserted into the DOM. Also see [eagerly preloading on insertion](https://unpoly.com/learn/preloading.md#on-insert).

When set to `'reveal'`, preloading will start when the link is scrolled into the [viewport](https://unpoly.com/api/up-viewport.md). If the link is already visible when inserted, preloading will start immediately. Also see [preloading when a link becomes visible](https://unpoly.com/learn/preloading.md#on-reveal).

When set to `'false'`, the link will not be preloaded. You can still preload this link programmatically using [`up.link.preload()`](https://unpoly.com/api/up.link.preload.md).

#### [up-preload-delay] {#up-preload-delay}

(optional)

With [`[up-preload="hover"]`](#up-preload), this requires the user to hover for the given number of milliseconds before the link is preloaded.

Defaults to [`up.link.config.preloadDelay`](https://unpoly.com/api/up.link.config.md#config.preloadDelay).

#### [up-intersect-margin='0'] (Experimental) {#up-intersect-margin}

(optional)

With `[up-preload=reveal]`, this enlarges the viewport by the given number of pixels before computing the intersection.

A positive number will preload the link some pixels before it becomes visible.

A negative number will require the user to scroll some pixels into the link before it is preloaded.

### Request {#attributes-request}

#### href {#href}

(required)

The URL to preload.

#### [up-headers] {#up-headers}

(optional)

A [relaxed JSON](https://unpoly.com/api/relaxed-json.md) object with additional request headers.

Unpoly will by default send a number of custom request headers. For example, the [`X-Up-Target`](https://unpoly.com/api/X-Up-Target.md) header includes the [target selector](https://unpoly.com/learn/targeting-fragments.md). See [`up.protocol`](https://unpoly.com/api/up.protocol.md) for details.