Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Kazap/lazyload-vue

Vue Plugin for vanilla-lazyload
https://github.com/Kazap/lazyload-vue

lazyload lazyload-images lazyload-img lazyload-vue vanilla-lazyload vue-plugin

Last synced: about 2 months ago
JSON representation

Vue Plugin for vanilla-lazyload

Lists

README 

        
# lazyload-vue



Vue Plugin for [vanilla-lazyload](https://github.com/verlok/lazyload)



Build status:



[![CircleCI](https://circleci.com/gh/Kazap/lazyload-vue/tree/master.svg?style=svg)](https://circleci.com/gh/Kazap/lazyload-vue/tree/master)



## 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



```js

import LazyloadVue from 'lazyload-vue'



Vue.use(LazyloadVue)

```



**Directive lazy-src example**



```html



  



```



**Directive lazy-container example**



```html



  


    

    ... other images

  



  .scrollingPanel {

    overflow-y: scroll;

    -webkit-overflow-scrolling: touch;

  }



```



**Example with options**



```js

import LazyloadVue from 'lazyload-vue'



Vue.use(LazyloadVue, {

    instances: {

        root: {

            elements_selector: '.lazy-custom-root'

        },

        webp: {

            elements_selector: '.lazy-webp'

            to_webp: true

        }

    }

})

```



```html



  


    

    

  



```



**Check options section on documentation:** [vanilla-lazyload](https://github.com/verlok/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