Vue Clazy Load

Claziest lazy loader out there!

Component-based image lazy loader for Vue.js 2

[]() []()

Swaps between your image and another component when loading images, allowing you to use loaders from component frameworks such as spinners and progress bars. This method also allows transitioning between the two components.

Demo

Check out the example page.

Installation

Install with npm or yarn:

npm install vue-clazy-load
yarn add vue-clazy-load

Then simply import it to your project through the method that suits you best

ES6+

import VueClazyLoad from 'vue-clazy-load'

Common/Require

var VueClazyLoad = require('vue-clazy-load')

And install into your Vue instance

Vue.use(VueClazyLoad)

You can import it into specific components if you don't want to register Clazy Load globally

import { VueClazyLoad } from 'vue-clazy-load'

export default {
  components: {
    VueClazyLoad
  }
}

Also available through Unpkg CDN

<script src="https://unpkg.com/vue-clazy-load/dist/vue-clazy-load.min.js"></script>

Documentation

Clazy Load works without any JS configuration as is, all you need is the basic HTML markup:

<clazy-load src="https://unsplash.it/500">
  <img src="https://unsplash.it/500">
  <div class="preloader" slot="placeholder">
    Loading message
  </div>
</clazy-load>

The only required prop you must set is src that must correspond to your image's.

Props

All props supported by Clazy Load are listed below with their types and explanation.

`src`

Type: string
Default: none
Required

Source of the image to be loaded. Must match your <img> tag src.

`tag`

Type: string
Default: "div"

What tag the component should render to.

`element`

Type: string
Default: null

Selector for Intersecion Observer's root element. Leave blank/null to use viewport.

`threshold`

Type: Array | number
Default: [0, 0.5, 1]

Values for Intersection Observer's threshold option.

`ratio`

Type: number
Default: 0.4

Percent of the element that needs to be visible to trigger loading. Must be > 0 and <= 1.

`margin`

Type: string
Default: "0px"

Intersection Observer's margin option.

You can read more on MDN about every Intersection Observer-specific prop and what they do.

`crossorigin`

Type: string
Default: null
Valid options: "anonymous" | "use-credentials"

Sets image's crossOrigin option and allows loading external images. Useful for Service Workers and caching.

`loadedClass`

Type: string
Default: "loaded"

`loadingClass`

Type: string
Default: "loading"

`errorClass`

Type: string
Default: null

All classes are added to the root element, not the image itself.

Events

`loading`

Image started loading and placeholder is visible.

`load`

Param: native load event

Image finished loading and is now visible.

`error`

Param: native error event

Could not load image. Image is not shown, placeholder still visible.

Compatibility

Vue Clazy Load uses the Intersection Observer API to watch for the element visibility on screen. The advantages are native optimization from each browser and no need to implement a custom solution that may be buggy and increase file size. The only caveat to this approach is that this API is quite new, so older browsers do not support it.

If your application needs to be backwards compatible with IE and others, there are polyfills available. I personally recommend Polyfill.io. You can check their documentation on how to add it to your website, or simply include the following tag if you're not using any other polyfills:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Changelog

Check out changelog file.

Roadmap

Check roadmap file.

Contributing

Issues, questions and feature requests are welcome. If you can cover some problem, pull requests are also very welcome!

License

MIT

matheusgrieger / vue-clazy-load

readme