# 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](https://matteo-gabriele.gitbook.io/vue-progressive-image/placeholder-image) 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).

### 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>
```