Images are a crucial part of every website and application nowadays. Whether it be marketing banners, product images, or logos, it is impossible to imagine a website without images. But large images have a bad impact on the performance of the page because they slow down your page load speed. So, we can use Lazy Loading Images as the solution to this problem.

Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later point in time, when those images are needed, instead of loading them up front. So, there are many ways to utilize Lazy Load Images in your web applications. Bartosz Dominiak introduced an Image lazy load component based on Intersection API. It is a lightweight and easy-to-use Vue js component.

Installation

You can install this package via npm or yarn

Yarn

yarn add vue-lazy

Npm

npm install vue-lazy 

Usage – Globally

import Vue from 'vue' 
import VueLazy from 'vue-lazy' 
import 'vue-lazy/dist/vue-lazy.css' 

Vue.use(VueLazy) 

Usage – Locally

import { LazyImage } from 'vue-lazy' 
import 'vue-lazy/dist/vue-lazy.css'  

export default { 

  components: { LazyImage } 

} 

Demo

Here’s a demo of the lazy load image

Image

<lazy-image 

  src="https://via.placeholder.com/250" 

  alt="example aternative text" 

/> 

Image with known width

You can also assign width and height to the image so it will prevent jumping content on the web page.

<lazy-image 

  src="https://via.placeholder.com/250" 

  alt="example aternative text" 

  width="250" 

  height="250" 

/> 

Picture

<lazy-image 

  src="https://via.placeholder.com/250" 

  alt="example aternative text" 

  tag="picture" 

> 

<source media="(min-width:1366px)" srcset="https://via.placeholder.com/1360x300"> 

<source media="(min-width:1024px)" srcset="https://via.placeholder.com/1024x300"> 

</lazy-image> 

Props

These are the following options available in this package.

Name	Description	Default
src	string	() => null
width	string	() => null
height	string	() => null
alt	string	() => null
srcset	string	() => null
intersectionConfig	object	{threshold: [0, 1]}
tag	string	() => ‘img’

Note

If you want to know more about this package you can head over to its complete documentation on Github.