Vue Lazy Image Component

Vue Lazy Image is a Vue.js component to lazy-load an image automatically when it enters the viewport using the Intersection Observer API.

Just published v-lazy-image v2.0!
✨ Works in Vue 3 and 2
🚀 Before: 2.74KB - After: 1.55 KB
☢️ Unit and E2E tests in place

Love how simple and easy @vite_js by @youyuxi made the lib setup. Take a look yourself!! https://t.co/MrfQbVd23e

— Alex Jover Morales (@alexjoverm) August 23, 2021

Using Vue Lazy Image is convenient to not have to dive into the inner-workings of building a lazy image loader from scratch:

<template>
  <v-lazy-image src="http://lorempixel.com/400/200/" />
</template>

Here's a more complex example which illustrates some neat features like srcset:

<v-lazy-image
    class="picture-demo"
    srcset="
        https://cdn-images-1.medium.com/max/400/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 400w,
        https://cdn-images-1.medium.com/max/800/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 800w
        https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 1600w
      "
    sizes="(max-width: 150px) 200px, 400px, 800p"
    src="https://cdn-images-1.medium.com/max/800/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    use-picture
/>

As you can see in the above example, this package includes powerful features in a simple-to-use API:

• Support for Vue 2 and Vue 3
• Automatic lazy images using the Intersection Observer API
• Responsive images using srcset
• Progressive image loading using the src-placeholder attribute (read more)
• Events for intersect, load and error

Your app will also likely see immediate performance gains since images will only load as they scroll into view.

You can learn more about this package, get full installation instructions, and view the source code on GitHub. The repo includes a playground for both Vue 2 and Vue 3 if you'd like to see some examples.