A pure lazyload plugin for vue or nuxt

<img src="" /> && background-image: url();

demo

$ yarn add vue-simple-lazyload -S // or $ npm i vue-simple-lazyload -S 

options Intersection_Observer_API

eg. rootMargin: '50px' can preload img before 50px

1. main.js

   import Vue from 'vue' import { VueImgLazy } from 'vue-simple-lazyload' Vue.use(VueImgLazy, { rootMargin: '50px' })

2. template

   <ImgLazy :imgUrl="" :bgColor="" :lazyloadContainer="" :lazyloadImg="" :placeholderFigure=""></ImgLazy>

3. Props

   Props	Description	Default	Opt/Required
   imgUrl	Image url	''	Required
   bgColor	Background color	''	Optional
   lazyloadContainer	Container class	'' // has default style	Optional
   lazyloadImg	Image Class	'' // has default style	Optional
   placeholderFigure	Placeholder image	A base64 transparent figure	Optional

1. main.js

   import Vue from 'vue' import { VueLazy } from 'vue-simple-lazyload' Vue.use(VueLazy, { rootMargin: '50px' })

2. template

   <div v-lazy="$imgUrl" :style="{  backgroundColor: $bgColor  }" class="lazyload-container"> <img :src="$placeholderFigure" class="lazyload-img" /> </div> /*css. This is also the default style of the VueImgLazy component*/ .lazyload-container { transition: background-color .5s ease-in-out .3s; width: 400px; height: 200px; } .lazyload-img { transition: opacity .5s ease-in-out .3s; opacity: 0; width: 100%; height: 100%; }

1. main.js

   import Vue from 'vue' import { VueLazy } from 'vue-simple-lazyload' Vue.use(VueLazy, { rootMargin: '50px' })

2. template

   <div v-lazy:bgimg="$imgUrl" :style="{  backgroundColor: $bgColor  }" class="lazyload-container"> </div> /*css. This is also the default style of the VueImgLazy component*/ .lazyload-container { transition: background-color .5s ease-in-out .3s; width: 400px; height: 200px; }

1. ~/plugins/lazyload.js

   import Vue from 'vue' import { VueLazy, VueImgLazy } from 'vue-simple-lazyload' Vue.use(VueLazy, { rootMargin: '50px' }) // or Vue.use(VueImgLazy, { rootMargin: '50px' })

2. nuxt.config.js

   ... plugins: [ { src: '~/plugins/lazyLoad', mode: 'client' } ], ...

This project base on Intersection_Observer_API. Need import polyfill if necessary.

1. Add nuxt modules