vue-lazing

A lazy loading component work with Vue.js 2, and based on IntersectionObserver.

• Online sample

Installing

# npm
npm i vue-lazing --save

or

# yarn
yarn add vue-lazing

Usage

• Install plugin.

import Vue from 'vue'
import VueLazing from 'vue-lazing'
Vue.use(VueLazing)

• 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 -->
<template>
  <vue-lazing :threshold="0.5">
    <img data-src="/1.png" src="/default.png">
    <img data-src="/2.png" src="/default.png">
    <img data-src="/3.png" src="/default.png">
    <div>some other elements<div>
    <img data-src="/4.png" src="/default.png">
    <img data-src="/5.png" src="/default.png">
    <img data-src="/6.png" src="/default.png">
    <img data-src="/7.png" src="/default.png">
  </vue-lazing>
</template>

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.

Changelog

Changelog