Skip to content

YasinChan/vue-simple-lazyload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-simple-lazyload

vue-simple-lazyload

A pure lazyload plugin for vue or nuxt

Support

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

Demo

demo

Usage

$ 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

Vue

Component

  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

Directive

v-lazy (for <img src="" />)
  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%;
    }
v-lazy:bgimg (for background-image: url();)
  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;
    }

nuxt

  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' }
     ],
    ...

Required

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

TODO

  1. Add nuxt modules