> For the complete documentation index, see [llms.txt](https://matteo-gabriele.gitbook.io/vue-progressive-image/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matteo-gabriele.gitbook.io/vue-progressive-image/lazy-loading.md). # 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 ```