Introduction

Defer or lazy load images

Usage

Installation

npm install --save lazy-image-component

Examples

import { LazyImage } from 'lazy-image-component';

export default {
  ...
  components: { LazyImage }
  ...
}

Examples of using LazyImage in a Vue component, which also documents the different options provided:

<template>
  <div>
    <!-- `src` and `alt` are required props -->
    <LazyImage src="./images/foo.png" alt="An image of foo" />

    <!-- Provide low resolution tumbnail image (64x64 is enough) -->
    <LazyImage src="./images/foo.png" thumbnail="./images/foo.png" />

    <!-- Page Header Image. VERY IMPORTANT -->
    <LazyImage src="./images/foo.png" critical />

    <!-- Important image but outside of initial view. (Good for low memory devices) -->
    <LazyImage src="./image/foo.png" eager />

    <!-- Resize placeholder image to correct size. And silent warning logs 😛  -->
    <LazyImage src="./image/foo.png" width="360px" height="200px" />
  </div>
</template>

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Author

lazy-image-component © Rahul Kadyan, Released under the MIT License. Authored and maintained by Rahul Kadyan with help from contributors (list).

znck.me · GitHub @Rahul Kadyan · Twitter @znck0