Skip to content

Kazap/lazyload-vue

Repository files navigation

lazyload-vue

Vue Plugin for vanilla-lazyload

Build status:

CircleCI

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