🖼️
vue-progressive-image
v5
v5
  • Get started
  • Placeholder image
  • Lazy loading
  • Fallback image
  • Image as background
  • Adjust the blur
  • Events
  • Custom CSS class
  • Delay animation
  • CSS Variables
Powered by GitBook
On this page

Lazy loading

how does the plugin works under the hood

PreviousPlaceholder imageNextFallback image

The plugin uses the browser API to establish when it's the right moment to load the main image and trigger the animation.

The smaller 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 .

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.

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