Blog Detail

16

Aug
Vue Lazy – A Lightweight Image Lazy Load Vue Component cover image

Vue Lazy – A Lightweight Image Lazy Load Vue Component

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.

Published at : 16-08-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project