vue-lazing v0.2.1

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.

Compatibility

You can check IntersectionObserver compatibility from here, and there is a polyfill for unsupporting browsers.

Changelog

Changelog