Repository files navigation

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 fromcomponent frameworks such as spinners and progress bars. This method also allows transitioning between the two components.

Check out theexample page.

Install with npm or yarn:

npm install vue-clazy-loadyarn add vue-clazy-load

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

• ES6+

  importVueClazyLoadfrom'vue-clazy-load'

• Common/Require

  varVueClazyLoad=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'exportdefault{components:{    VueClazyLoad}}

Also available through Unpkg CDN

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

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

<clazy-loadsrc="https://unsplash.it/500"><imgsrc="https://unsplash.it/500"><divclass="preloader"slot="placeholder">    Loading message</div></clazy-load>

The only required prop you must set issrc 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 useviewport.

• 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 onMDN about every Intersection Observer-specific prop and what they do.

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

Sets image'scrossOrigin 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 theroot 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 recommendPolyfill.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:

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

Check outchangelog file.

Checkroadmap file.

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

MIT

Copyright (c) 2017-2018, Matheus Grieger