# Lazy loading

The plugin uses the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) browser API to establish when it's the right moment to load the main image and trigger the animation. 

The smaller [placeholder image](/vue-progressive-image/placeholder-image.md) is quicker to render on the page and will give the user faster feedback. If a placeholder is not provided, the skeleton animation will be displayed by default.

Read more about Low-Quality Placeholder Image (LQPI) technique in this article [here](https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained#:~:text=Low%2Dquality%20image%20placeholders%20\(LQIPs,with%20lazy%20loading%20in%20JavaScript.).

### Lazy-load all placeholders

By default, all placeholder images are eagerly loaded to give the user immediate feedback. Suppose we don't want to load all placeholder images at once; we can pass the `lazy-placeholder` attribute to the component, setting the image loading attribute to `lazy` instead.

The only caveat of lazy loading the placeholder is that we will know dimensions in a later stage and could cause the image to take 100% of its parent until we download it and calculate. It can be a good solution in cases where we have a CSS grid system or hard-coded size values.

```html
<template>
  <ProgressiveImage
    lazy-placeholder
    placeholder-src="https://picsum.photos/id/1080/19/10"
    src="https://picsum.photos/id/1080/1980/1080"
  />
</template>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://matteo-gabriele.gitbook.io/vue-progressive-image/lazy-loading.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.