lazyload-vue

lazyload-vue

Vue Plugin for vanilla-lazyload

Build status:

features

• Simple usage with v-lazy-src
• Accepts options Vue.use(LazyloadVue, options)
• Multiple instances
• Scrolling Panel
• Multiple scrolling panels
• Responsive images - img tag with srcset / sizes
• Responsive images - picture tag
• Delay load
• Videos - Tag video
• Lazy Iframes
• Lazy Background images with v-lazy-bg

Install

yarn add lazyload-vue

Usage

import LazyloadVue from 'lazyload-vue'

Vue.use(LazyloadVue)

Directive lazy-src example

<template>
  <img v-lazy-src="'http://lorempixel.com/300/300'" />
</template>

Directive lazy-container example

<template>
  <div v-lazy-container class="scrollingPanel">
    <img v-lazy-src="'http://lorempixel.com/300/300'" />
    ... other images
  </div>
</template>
<style>
  .scrollingPanel {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
</style>

Example with options

import LazyloadVue from 'lazyload-vue'

Vue.use(LazyloadVue, {
    instances: {
        root: {
            elements_selector: '.lazy-custom-root'
        },
        webp: {
            elements_selector: '.lazy-webp'
            to_webp: true
        }
    }
})

<template>
  <div>
    <img v-lazy-src="'http://lorempixel.com/300/300'">
    <img v-lazy-src:webp="'http://lorempixel.com/300/300'">
  </div>
</template>

Check options section on documentation: vanilla-lazyload

Development Setup

# Project setup

yarn install

# Compiles and hot-reloads for development

yarn start

# Compiles and minifies for production

yarn build

# Run your tests

yarn test

# Lints and fixes files

yarn lint

# Run your unit tests

yarn test:unit