VueJS Examples

Best VueJS Progressive Image Loading Components

A curated list of the best Progressive Image Loading components.

1. vue-progressive-image

Vue progressive image loading plugin.

alt tag

Requirements

Vue ^3.0.0

Step 1: Install

npm install vue-progressive-image

Documentation

Read more


2. v-lazy-image

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

⚠️ Check the practical examples and demos if you are creating a real-world or enterprise project and see how to achieve max performance using responsive images and progressive image loading.

Usage

npm install v-lazy-image

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

For Vue 3, import it and use it like any other component:

<script setup>
  import VLazyImage from "v-lazy-image";
</script>

For Vue 2, import it from v-lazy-image/v2:

import VLazyImage from "v-lazy-image/v2";

export default {
  components: {
    VLazyImage
  }
};

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

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

That easy, the image will be loaded as soon as it enters the viewport. See it running in this demo and you'll learn how to use Chrome DevTools to check how it's loaded.

Read more


3. progressive-image

A dead simple progressive-image module for Vanilla JavaScript and Vue.js 1.0+ & 2.0+.

gif

Step 1: Install

$ npm install progressive-image --save

$ yarn add progressive-image

For Vanilla JS

demo

progressive-image-demo

progressive-image-vue-demo

Step 2: Usage

import css

<link href="./node_modules/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

or

<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

HTML

<main id="app">
  <div class="progressive">
    <img class="preview lazy" data-src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/1.jpg" src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/r1.jpg" />
  </div>
  <div class="progressive">
    <img class="preview lazy" data-src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/2.jpg" src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/r2.jpg" />
  </div>
</main>
<script src="./dist/index.js"></script>

JS

(function(){
  new Progressive({
    el: '#app',
    lazyClass: 'lazy',
    removePreview: true
    scale: true
  }).fire()
})()

For Vue.js

import css

<link href="./node_modules/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

or

<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

HTML

<main id="app">
  <template v-for="item in imgs">
    <div class="space"></div>
    <div class="progressive">
      <img class="preview" v-progressive="item.src" :data-srcset="item.srcset" :src="item.preview" />
    </div>
  </template>
</main>

JS

import Vue from 'vue'
import progressive from 'progressive-image/dist/vue'

Vue.use(progressive, {
  removePreview: true,
  scale: true
})

new Vue({
  name: 'demo',
  el: '#app',
  data: {
    imgs: [
      {
        src: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/2.jpg',
        preview: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/r2.jpg'
      },
      {
        src: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/3.jpg',
        preview: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/r3.jpg'
      }
    ]
  }
})

Read more


4. vue-progressive-images

Super lightweight script that provides a way to offer progressive image loading in Vue Apps.

Important:

You might not need this plugin if you are targeting newer browsers. The IMG tag have a property called SRCSET, which is much more powerful.

http://caniuse.com/#feat=srcset

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

But if you need this plugin, here is how you get it:

npm install vue-progressive-images

or

yarn add vue-progressive-images

How to use?

<template>
  <div>
    <Image class="photo" src="static/photo@0x.png" alt="My alt text"></Image>
  </div>
</template>

<script>
import Image from 'vue-progressive-images';

export default {
  name: 'my-header',
  components: { Image }
};
</script>

<style>
.photo img {
  width: 200px;
}
</style>

Or...
Even better you can define it as a recursive component on your "main.js":

import Image from 'vue-progressive-images';
import Vue from 'vue';
...

Vue.component('Image', Image);

new Vue({
  ...

How to use with NUXT ?

In order to use this script with NUXT, please create a new component within your NUXT project, lets say "components/Image.vue", and then copy and past the content from the file "vue-progressive-images/src/Image-Nuxt.vue" into it. Once that is done, you can register the component as a global component. To do that, edit your main layout (vue).

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import Image from '@/components/Image'

Vue.component('fn-image', Image)

export default { }
</script>

Read more


5. vue-image-loader

Vue progressive image loading plugin.

alt tag

Article here : https://www.kevindesousa.me/vue-image-loader/

Step 1: Installation

$ npm install @kevindesousa/vue-image-loader

Step 2: Usage

import Vue from 'vue'
import VueImageLoader from '@kevindesousa/vue-image-loader'

Vue.use(VueImageLoader)

Progressive loader image

Instead of using the normal img tag to load images

<img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304" />

use the image-loader component already globally available after the plugin installation

<image-loader
  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
  width="864px"
  height="476px" />

Placeholders

To be able to immediately show some feedback to the user, it is possible to pass a placeholder image, which could be also 1% the size of the main image: it will be blurred so you can go crazy with optimizations here.

in this example I actually use the same image, but you have the idea here

<image-loader
  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
  placeholder="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=100"
  width="864px"
  height="476px"
/>

Read more


6. vue-progressive-image

Load image progressively, blur first, scroll into view, load larger image.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Read more


Related Posts