Lazy Loading Images in a Single Line

Using v-lazy-image we can lazily load images only when they're in the viewport:

<template>
  <v-lazy-image src="fullSizeImage.jpg" />
</template>

With src-placeholder we can also use progressive enhancement. First, the tiny low resolution image is loaded, then we switch to the full resolution image once it's been loaded:

<template>
  <v-lazy-image
    src="fullSizeImage.jpg"
    src-placeholder="tinySizeImage.jpg"
  />
</template>

With some simple CSS classes we can also animate the transition when the image loads. We can start with a blurred image and unblur to reveal the full image:

.v-lazy-image {
  filter: blur(10px);
  transition: filter 0.7s;
}
.v-lazy-image-loaded {
  filter: blur(0);
}

And we can also do this elegant fade in of the full resolution image:

.v-lazy-image {
  opacity: 0;
  transition: opacity 2s;
}
.v-lazy-image-loaded {
  opacity: 1;
}