A Vue.js component to lazy load images using the Intersection Observer.

Related tags

Lazy Load vue-li
Overview

vue-li-image

npm npm

A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

This is an opinionated upgrade of the original Vue Lazy Image loading library v-lazy-image including certain fixes already submitted as pull requests on the original library, which were never merged. Kudos to Alex Jover for the original idea!

Usage

npm install vue-li-image

Warning: You'll need to install the w3c Intersection Observer polyfill in case you're targeting a browser which doesn't support it.

You can register the component globally so it's available in all your apps:

import Vue from "vue";
import { VueLiPlugin } from "vue-li-image";

Vue.use(VueLiPlugin);

Or use it locally in any of your components:

import VueLi from "vue-li-image";

export default {
  components: {
    VueLi
  }
};

You must pass an src property with the link of the image:

">
<template>
  <vue-li src="http://lorempixel.com/400/200/" />
template>

That image will be loaded as soon as the image enters the viewport.

Progressive Loading

You can use the src-placeholder property to define an image that is shown until the src image is loaded.

When the src image is loaded, a vue-li-loaded class is added, so you can use it to perform animations. For example, a blur effect:

">
<template>
  <vue-li
    src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
  />
template>

<style scoped>
.vue-li {
  filter: blur(10px);
  transition: filter 0.7s;
}
.vue-li {
  filter: blur(0);
}
style>

In case you are using Webpack bundler for images too (just like Vue-cli):

">
<vue-li
  src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
  :src-placeholder="require('../assets/img.jpg')"
/>

You could listen to the intersect and load events for more complex animations and state handling:

">
<template>
  <vue-li
    src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    @intersect="..."
    @load="..."
  />
template>

@jmperezperez has written about the progressive loading technique on his blog, in case you want a deeper explanation.

Responsive Images

Using the srcset property you can set images for different resolutions:

">
<template>
  <vue-li
    srcset="image.jpg 1x, image_2x.jpg 2x"
  />
template>

When using the srcset attribute is recommended to use also src as a fallback for browsers that don't support the srcset and sizes attributes:

">
<template>
  <vue-li
    srcset="image-320w.jpg 320w, image-480w.jpg 480w"
    sizes="(max-width: 320px) 280px, 440px"
    src="image-480w.jpg"
  />
template>

The srcset prop is combinable with src-placeholder in order to apply progressive loading.

Picture

If you want to wrap the img in a picture tag, use the prop usePicture. You can then use slots to add additional elements above the img element`.

">
<vue-li
  srcset="image-320w.jpg 320w, image-480w.jpg 480w"
  alt="Fallback"
  use-picture
>
  <source srcset="image-320w.jpg 320w, image-480w.jpg 480w" />
vue-li>

Renders as:

Fallback ">
<picture>
  <source srcset="image-320w.jpg 320w, image-480w.jpg 480w" />
  <img srcset="image-320w.jpg 320w, image-480w.jpg 480w" alt="Fallback" />
picture>

Note you can use the picture polyfill.

API

Aside from the following API, you can pass any img attribute, such as alt, and they'll be added to the rendered tag.

Fields marked as (*) are required.

Props

Name Type Default Description
src String (*) - Image src to lazy load when it intersects with the viewport
src-placeholder String ' ' If defined, it will be shown until the src image is loaded.
Useful for progressive image loading, see demo
src-fallback String ' ' If defined, it will be shown if the src image fails to load
srcset String - Images to be used for different resolutions
intersection-options Object () => ({}) The Intersection Observer options object.
use-picture Boolean false Wrap the img in a picture tag.

Events

Name Description
intersect Triggered when the image intersects the viewport
load Triggered when the lazy image defined in src is loaded
error Triggered when the lazy image defined in src fails to load
You might also like...
Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

A vue component for sleek and optimal lazy loading

sloth-loader 🦥 Image Lazy loader Vue Component with intersection observer Example here Installation yarn add sloth-loader npm i sloth-loader import c

simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

:camera: Mini Image Lazy Loader for P(R)eact and Vue
:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js. It helps in lazy loading of images in a nice and cool way. It's 2KB (gzipped). It h

A small lazy image loader for Vue

lazy-vue lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do

A super simple image lazy loader for Vue.

cube-vue-image-lazy A super simple image lazy loader for Vue. Install yarn add cube-vue-image-lazy Warning: You'll need to install the w3c Intersectio

A Vue lazy loading directive.

A Vue lazy loading directive.

simple calculation lib with lazy feature 🎲➕➖➗✖️
simple calculation lib with lazy feature 🎲➕➖➗✖️

vue-lazy-calc this is a simple calculation plugin in lazy way. (inspired by lodash) features vue friendly strong typed lazy evaluation chaining method

A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists
A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists

Lazy Load List Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists. Rend

Owner
null
Component-based lazy (CLazy) load images in Vue.js 2

Vue Clazy Load Claziest lazy loader out there! Component-based image lazy loader for Vue.js 2 Swaps between your image and another component when load

Matheus Grieger 108 Jun 14, 2022
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
Lazy load background images for Vue 2

Lazy Background Images for Vue vue-lazy-background-images A simple Vue component for lazy loading background components. This component is only for ba

Darryn Ten 68 Apr 7, 2022
A plugin of lazy-load images for Vue2.x

vue-lazyload-images A plugin of lazy-load images for Vue2.x Support images lazyload in window or build-in element. Demo Installation npm $ npm install

LowesYang 60 Mar 28, 2022
🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API

?? vue-tiny-lazyload-img A small size Vue.js directive for lazy loading images using IntersectionObserver API Demo Page https://mazipan.github.io/vue-

Irfan Maulana 91 Nov 18, 2021
A Lazy load plugin for Vue 3.x

vue3-lazy Status: Alpha. Lazy load plugin for Vue 3.x inspired by vue-lazyload. This plugin support very simple options, and easy to use. Install $ np

null 2 Feb 8, 2022
Vue.js lazy load image directive with akamai image converter

vue-lazyload-akamai Vue.js lazy load image directive with akamai image converter ??

Blibli.com 2 Aug 13, 2018
vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

null 5 Sep 25, 2022
The easiest way to lazy load your content

VueLazily The easiest way to lazy load your content. Inspired by vue-promised, recommend to look at it if you need loading/errors handling without laz

Enkot 6 Aug 31, 2022
Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

Vue Visual Vue 2 image and video loader supporting lazy loading. Visual 2.x is a simplification of Version 1.x with a greater reliance on modern brows

Bukwild 56 Sep 9, 2022