vue-lazing
A lazy loading component work with Vue.js 2, and based on IntersectionObserver.
Installing
# npm npm i vue-lazing --save
or
# yarn yarn add vue-lazing
Usage
- Install plugin.
Vue
- Use
<vue-lazing>
components. Optionally, you can pass 3 kinds of parameters to control how to lazy loading.
<!-- in single component file using default options --> some other elements
Once target <img>
element's visibility is over threshold
value, target's src
will be replaced by data-src
attribute.
API
All API is based on IntersectionObserver. There are more practical experiences.
Options | Type | Default | Description |
---|---|---|---|
root | HTMLElement | null ( means viewport ) | The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. |
rootMargin | String | 0px |
Margin around the root. |
threshold | Number | 0.1 (means 10%) | A number indicate at what percentage of the target's visibility the replace runner should be executed. |
Compatibility
You can check IntersectionObserver
compatibility from here, and there is a polyfill for unsupporting browsers.