Lightweight transitionable image lazy loading for Vue.js 2

Lightweight transitionable image lazy loading for Vue.js 2

Component-based lazy (CLazy) load images in Vue.js 2.

Vue Clazy Load

Claziest lazy loader out there!

Component-based image lazy loader for Vue.js 2

npm npm npm GitHub pull requests GitHub stars

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.


Check out the example page.


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


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: {

Also available through Unpkg CDN

<script src=""></script>


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

<clazy-load src="">
  <img src="">
  <div class="preloader" slot="placeholder">
    Loading message

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


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


  • Type: string
  • Default: none
  • Required

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


  • Type: string
  • Default: "div"

What tag the component should render to.


  • Type: string
  • Default: null

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


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

Values for Intersection Observer's threshold option.


  • Type: number
  • Default: 0.4

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


  • 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.


  • 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.


  • Type: string
  • Default: "loaded"


  • Type: string
  • Default: "loading"


  • Type: string
  • Default: null

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



Image started loading and placeholder is visible.


  • Param: native load event

Image finished loading and is now visible.


  • Param: native error event

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


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 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=""></script>


Check out changelog file.


Check roadmap file.


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



Copyright (c) 2017-2018, Matheus Grieger

Github Repository