Skip to content
vue component to render and lazy load img and picture/source tags with rokka.io
JavaScript Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
tests
.eslintrc.js
.gitignore
.prettierrc
.travis.yml
LICENSE
README.md
babel.config.js
jest.config.js
package-lock.json
package.json
rollup.config.js

README.md

vue-rokka-image-lazy

npm travis dependencies bundlephobia zipped coveralls

Loads images lazy from rokka

It's compatible to vue-rokka-image.

It uses the pretty small lozad library.

Demo

jsFiddle / jsFiddle with rokka.js

Installation

npm install rokka-io/vue-rokka-image-lazy --save

Usage

It has the same properties as vue-rokka-image, so just replace the import and maybe tagname to get lazyloading

It also adds srcset for 1x and 2x. You can overwrite that with the postfix and options properties.

It additionally suppports a loading property, which should point to a loading image

<template>
    <rokka-img-lazy-load
      alt="alt Text"
      :title="Title"
      :organization="rokkaOrg"
      :stack="'resizecrop'"
      :hash="HASH"
      :format="jpg"
      filename="image.jpg"
      :loading="loadingImage"
/>
</template>
<script>
import { RokkaImageImgLazy } from 'vue-rokka-image-lazy';
export default {
  components: {
    RokkaImageImgLazy,
  },
  data() {
    return {
      loadingImage: process.env.BASE_URL + '/assets/loading.gif',
    };
  }
}
</script>

Development from within a Vue.js project

  • Go to component folder
  • change main in package.json to main: "src/index.js"
  • npm link
  • Go to project folder
  • npm link vue-rokka-image-lazy
  • et voila
You can’t perform that action at this time.