axetroy/lazy-image

Lazy image component for Vue.js & React.js

Lazy image component for Vue & React

Online Demo

Installation

npm install @axetroy/lazy-image

Usage

Using with Vue

<template>
  <lazy-image style="max-width: 100%;" src="https://example.com/img.png" />
</template>

<script>
import LazyImage from "@axetroy/lazy-image/vue";

export default {
  components: {
    "lazy-image": LazyImage
  }
};
</script>

Vue Props

Prop	Description	Defaults
src	Image src url	undefined

Vue Events

Prop	Description
@enter	trigger when enter into viewport
@leave	trigger when leave viewport

Using in React

import React from "react";
import LazyImage from "@axetroy/lazy-image/react";

class App extends React.Component {
  render() {
    return (
      <LazyImage
        style={{ maxWidth: "100%" }}
        src={"https://example.com/img.png"}
      />
    );
  }
}

React Props

Prop	Description	Defaults
src	Image src url	undefined
onEnter()	trigger when enter into viewport	undefined
onLeave()	trigger when leave viewport	undefined

Browsers support

IE / Edge	Firefox	Chrome	Safari
IE9, IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

IE11 require polyfill Object.assign()

IE10 require polyfill new Set() and new Map()

License

The MIT License