https://github.com/matheusgrieger/vue-clazy-load
Component-based lazy (CLazy) load images in Vue.js 2
https://github.com/matheusgrieger/vue-clazy-load
intersectionobserver lazy-load lazy-loading vue vue-components vuejs2
Last synced: 3 months ago
JSON representation
Component-based lazy (CLazy) load images in Vue.js 2
- Host: GitHub
- URL: https://github.com/matheusgrieger/vue-clazy-load
- Owner: matheusgrieger
- License: mit
- Created: 2017-08-17T20:05:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-04T18:47:45.000Z (almost 7 years ago)
- Last Synced: 2025-08-14T14:46:34.327Z (4 months ago)
- Topics: intersectionobserver, lazy-load, lazy-loading, vue, vue-components, vuejs2
- Language: JavaScript
- Homepage: https://matheusgrieger.github.io/vue-clazy-load/
- Size: 220 KB
- Stars: 104
- Watchers: 3
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue - vue-clazy-load - Component-based lazy (CLazy) load images in Vue.js 2 ` 📝 2 years ago` (UI Utilities [🔝](#readme))
- awesome-vue-zh - Vue-clazy负荷 - 使用IntersecionObserver for Vue 2的轻量级可转换图像延迟加载组件. (UI实用程序 / 延迟加载)
- awesome-vue - vue-clazy-load ★92 - Lightweight transitionable image lazy loading component using IntersecionObserver for Vue 2. (UI Utilities / Lazy Load)
- awesome-vue - vue-clazy-load - Lightweight transitionable image lazy loading component using IntersecionObserver for Vue 2. (UI Utilities / Lazy Load)
- awesome-vue - vue-clazy-load - Lightweight transitionable image lazy loading component using IntersecionObserver for Vue 2. (Components & Libraries / UI Utilities)
README
# Vue Clazy Load
> _Claziest_ lazy loader out there!
Component-based image lazy loader for Vue.js 2
[](https://www.npmjs.com/package/vue-clazy-load)
[](https://www.npmjs.com/package/vue-clazy-load)
[](https://www.npmjs.com/package/vue-clazy-load)
[]()
[]()
Swaps between your image and another component when loading images, allowing you to use loaders from [component frameworks](https://github.com/vuejs/awesome-vue#frameworks) such as spinners and progress bars. This method also allows transitioning between the two components.
## Demo
Check out the [example page](https://matheusgrieger.github.io/vue-clazy-load/example/index.html).
## Installation
Install with npm or yarn:
```sh
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+
```js
import VueClazyLoad from 'vue-clazy-load'
```
* Common/Require
```js
var VueClazyLoad = require('vue-clazy-load')
```
And install into your Vue instance
```js
Vue.use(VueClazyLoad)
```
You can import it into specific components if you don't want to register Clazy Load globally
```js
import { VueClazyLoad } from 'vue-clazy-load'
export default {
components: {
VueClazyLoad
}
}
```
Also available through Unpkg CDN
```html
```
## Documentation
Clazy Load works without any JS configuration as is, all you need is the basic HTML markup:
```html
Loading message
```
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 `![]()
` 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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 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](https://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:
```html
```
## Changelog
Check out [changelog](CHANGELOG.md) file.
## Roadmap
Check [roadmap](ROADMAP.md) file.
## Contributing
Issues, questions and feature requests are welcome. If you can cover some problem, pull requests are also very welcome!
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2017-2018, Matheus Grieger