Nutella with Pepperoni and Mushrooms
    Wondering what’s next for npm?Check out our public roadmap! »

    lazyload-vue

    0.1.20 • Public • Published

    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
    

    Install

    npm i lazyload-vue

    DownloadsWeekly Downloads

    22

    Version

    0.1.20

    License

    MIT

    Unpacked Size

    1.2 MB

    Total Files

    77

    Last publish

    Collaborators

    • avatar
    • avatar