lazyload-vue
Vue Plugin for [vanilla-lazyload](https://github.com/verlok/lazyload)
Last updated 3 months ago by rogeralbinoi .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install lazyload-vue 
SYNC missed versions from official npm registry.

lazyload-vue

Vue Plugin for vanilla-lazyload

Build status:

CircleCI

features

  • [x] Simple usage with v-lazy-src
  • [x] Accepts options Vue.use(LazyloadVue, options)
  • [x] Multiple instances
  • [x] Scrolling Panel
  • [x] 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

Current Tags

  • 0.1.10                                ...           latest (3 months ago)

11 Versions

  • 0.1.10                                ...           3 months ago
  • 0.1.9                                ...           4 months ago
  • 0.1.8                                ...           5 months ago
  • 0.1.7                                ...           5 months ago
  • 0.1.6                                ...           7 months ago
  • 0.1.5                                ...           7 months ago
  • 0.1.4                                ...           7 months ago
  • 0.1.3                                ...           7 months ago
  • 0.1.2                                ...           7 months ago
  • 0.1.1                                ...           7 months ago
  • 0.1.0                                ...           7 months ago
Downloads
Today 0
This Week 0
This Month 12
Last Day 0
Last Week 1
Last Month 3
Dependencies (1)
Dev Dependencies (15)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |